Introduction à l'utilisation des gestes avancés dans les compétences du didacticiel Javascript_html5

La prise en charge de la reconnaissance nouvellement ajoutée pour la saisie utilisateur avancée dans IE10, par exemple : enregistrez une opération de clic, et grâce à la phrase addEventListener, vous pouvez savoir sur quel appareil l'utilisateur actuel clique, qu'il s'agisse d'un clic de doigt ou d'un clic de souris. . Ou cliquez avec un stylet (les tablettes sont toutes équipées d'un stylet).

<toile id="MyCanvas">toile >
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, faux); fonction MyBack(e) {                                                                                                                                                                        ; >
Le code ci-dessus peut identifier sur quel appareil l'utilisateur actuel clique et le déterminer via e.pointerType dans la méthode de rappel. La souris vaut 4, le stylet vaut 3 et le doigt vaut 2. Quant à savoir à quel type d'appareil correspond la valeur 1, cela reste à étudier. Une autre chose à noter est que si vous souhaitez ajouter la reconnaissance des périphériques d'entrée en JavaScript, les événements de méthode enregistrés sont également un peu différents.
L'événement ajouté par
addEventListener est
MSPointerDown Dans IE10, pour une telle reconnaissance de plusieurs appareils, les clics du doigt sont prioritaires, à condition que la fonction de clic normale ne soit pas affectée. Cependant, IE10 reconnaît non seulement le périphérique de saisie de l'utilisateur, mais prend également en charge de nombreux gestes avancés Ce qui suit est une démonstration de la prise en charge avancée des gestes d'IE10

Créer un objet gestuel

La première étape de la gestion des gestes sur votre site Web consiste à instancier un objet geste.

<span style="COLOR: blue">var</span>

myGesture = nouveau

MSGesture();

Ensuite, fournissez un élément cible pour le geste. Le navigateur déclenchera l'événement de geste sur l'élément. En même temps, cet élément peut également déterminer l'espace de coordonnées de l'événement.

elm = document.getElementById(<span style="COLOR: marron">"someElement"<p>);</p></span>

<span style="COLOR: blue">var</span> myGesture = new MSGesture();elm.addEventListener(<span style="COLOR: marron">"MSGestureChange"</span>

, handleGesture);

最後，告知手勢物件在手勢辨識期間處理哪些指標。

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

注意：請不要忘記您需要使用 –ms-touch-action 來配置元素以防止其執行預設觸控操作（例如，平移和縮放），並為輸入提供指標事件。

處理手勢事件

一旦手勢物件具有有效目標並至少添加了一個指針，則其將開始觸發手勢事件。手勢事件可分為兩種：靜態手勢（例如，點擊或保持）和動態手勢（例如，收縮、旋轉和輕掃）。

點選

最基本的手勢辨識是點擊。當偵測到點擊時，將會在手勢物件的目標元素觸發 MSGestureTap 事件。不同於點擊事件，點擊手勢只能在使用者觸控、按滑鼠按鈕或使用手寫筆觸控而不移動時觸發。如果您要區分使用者點擊元素和拖曳元素的操作，這一點通常會顯得十分有用。

長按

長按手勢是指使用者使用一個手指觸摸螢幕，並保持片刻並抬起而不移動的操作。在長按互動期間，MSGestureHold 事件會針對手勢的各種狀態而多次觸發：

複製程式碼

複製程式碼

複製程式碼



複製程式碼


程式碼如下:


element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FL_E // Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.}

}MSGestureStartif (evt.detail & evt.MSGESTURE_FLAG_END) {MSGestureChange// End signals the end of the gesture.MSGestureEnd}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {}MSGesture >
動態手勢（收縮、旋轉、輕掃和拖曳）

動態手勢（例如，收縮或旋轉）將以轉換的形式報告，這與 CSS 2D 轉換相當類似。動態手勢可引發三種事件：

、（隨著手勢的持續而重複觸發）和 。每個事件都包含縮放（收縮）、旋轉、轉換和速度等相關資訊。 由於動態手勢以轉換的形式報告，因此使用包含 CSS 2D 轉換的

來操作諸如照片或拼圖等元素將變得十分輕鬆。例如，您可以透過下列方式啟用縮放、旋轉和拖曳元素的操作：

複製程式碼


程式碼如下:


targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you wbuant to able if youd dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture.rotate(e. rotation * 180 / Math.PI) // Apply Rotation.scale(e.scale) // Apply Scale.translate(e.translationX, e.translationY) // Apply Translation.translate( -e.offsetX, -e.offsetY); // Move the transform origin back}縮放和旋轉等動態手勢可支援滑鼠操作，具體可透過在旋轉滑鼠滾輪的同時分別使用CTRL 或SHIFT 修飾鍵來實現。