資訊專欄INFORMATION COLUMN
摘要：指針事件給用戶代理帶來靈活性，給一個事件系統(tǒng)提供豐富的輸入機制。就像蘋果和谷歌現(xiàn)在就沒有打算來實現(xiàn)指針事件。谷歌的這個決定并不是他們最終的決定，但是目前在指針事件上沒有活躍的工作。
原文地址：http://tw93.github.io/2015-03-30/Browser-input-Events.html
響應(yīng)用戶的輸入可以說是我們做界面開發(fā)的核心。為了構(gòu)建可響應(yīng)的Web產(chǎn)品，理解觸摸、鼠標、指針、鍵盤操作和瀏覽器的工作原理是解決問題的關(guān)鍵。你可能在手機瀏覽器中經(jīng)歷過300-millisecond delay(300 ms延遲)或者wrestled with touchmove versus scrolling(觸摸滾動導(dǎo)致頁面卡頓)。
在本文中，我們將介紹事件級聯(lián)和使用這些知識來實現(xiàn)演示一個tap點擊事件，支持多種輸入方法但是又沒有違反像Opera Mini這一類的代理瀏覽器規(guī)則。
注：tap也翻譯為點擊，tap和click都是在點擊時候觸發(fā)，但在手機Web端click會有200~300ms延遲，為了避免歧義，下文將” tap event“翻譯成“tap點擊事件“
概況目前被用于與Web交互的3種主要的交互方式是：數(shù)字光標（鼠標）、觸覺（直接觸摸或者手寫筆）、鍵盤。在JavaScript中我們可以通過觸摸事件,鼠標事件,指針事件和鍵盤事件來使用它們。在這篇文章中我們主要討論觸摸和基于鼠標的交互，雖然這里有鍵盤事件已經(jīng)形成標準，如click和submit事件。
你很有可能已經(jīng)實現(xiàn)過鼠標和觸摸事件的處理程序，在過去我們推薦的做法是這樣：
javascript/** DO NOT EVER DO THIS! */
$("a", ("ontouchstart" in window)?"touchend":"click",handler);
微軟已經(jīng)負責(zé)創(chuàng)建了一個更好的，更有前途的“指針事件”的事件模型規(guī)范。指針事件是一個抽象的輸入機制,現(xiàn)在是W3C推薦標準。指針事件給用戶代理(UA)帶來靈活性，給一個事件系統(tǒng)提供豐富的輸入機制。鼠標、觸摸、手寫筆是今天很容易想到的輸入方式，但實現(xiàn)延伸到myo（肌）和Ring（環(huán)）也是可實現(xiàn)的。雖然Web開發(fā)者對這些似乎很興奮，但并不是所有的瀏覽器開發(fā)者也會這樣以為。就像蘋果和谷歌現(xiàn)在就沒有打算來實現(xiàn)指針事件。
谷歌的這個決定并不是他們最終的決定，但是目前在指針事件上沒有活躍的工作。我們通過polyfills輸入和使用指針事件和替代解決方案將成為等式的一部分，可能最終起決定作用。蘋果在2012年發(fā)表申明反對指針事件，我現(xiàn)在沒有從Safari的工程師那里得到任何公眾回應(yīng)。
事件級聯(lián)當(dāng)用戶在移動設(shè)備上面tap點擊一個元素時，瀏覽器會觸發(fā)一系列事件：
touchstart → touchend → mouseover → mousemove → mousedown → mouseup → click
這是由于Web的向后兼容性，指針事件采取的一種可替代方案來觸發(fā)事件內(nèi)聯(lián)的兼容性：
mousemove → pointerover → mouseover → pointerdown → mousedown → gotpointercapture → pointerup → mouseup → lostpointercapture → pointerout → mouseout → focus → click
事件規(guī)范允許用戶代理們用不同的方式來實現(xiàn)兼容性的事件，Patrick Lauke和Peter-Paul Koch維護著關(guān)于這一主題的廣泛的參考材料（資源鏈接位于文章底部）。
以下圖片顯示下列行為的事件串：
首次tap點擊一個元素
第二次tap點擊一個元素
tap點擊關(guān)閉元素
請注意：為了適應(yīng)這個棧這個事件棧故意忽略了focus和blur事件。
在IOS設(shè)備上的tap點擊一個元素兩次和松開的事件級聯(lián)
在 Android 4.4 設(shè)備上的tap點擊一個元素兩次和松開的事件級聯(lián)
在Internet Explorer 11（在兼容的觸摸事件實現(xiàn)）上tap點擊元素兩次然后松開的事件級聯(lián)
應(yīng)用事件級聯(lián)由于瀏覽器工程師的工作，大多數(shù)現(xiàn)在建成的桌面網(wǎng)站“只是可以工作而已”。盡管級聯(lián)看起來有點粗糙，但建立鼠標事件是我們以前通常工作的保守做法。
當(dāng)然，300ms的延遲問題比起在滾動和touchmove和pointermove事件相互作用，還有瀏覽器渲染問題這些額外的問題更加臭名昭著。避免300 ms的延遲很容易，如果：
我們只為現(xiàn)代的Android和桌面端的Chrome優(yōu)化，通過使用來啟動禁用延遲這一功能。
我們只為IOS設(shè)備優(yōu)化，用戶有一個明確的點擊，不是那種快速的點擊或者長按，僅僅是一個元素良好的、正常的、明確的點擊。
如果我們的目標是建立一個能在用戶體驗和本地應(yīng)用媲美的Web應(yīng)用，那么我們需要減少交互響應(yīng)的延遲。為了達到這個目標，我們需要在原始事件（如down,move,up）上創(chuàng)建我們屬于自己的復(fù)合事件(click,double-click),當(dāng)然我們還需要對本地事件的回退處理提供廣泛和可行的支持。
做這些需要不少的代碼和知識。為了避免在瀏覽器中的300ms延遲，我們需要處理全部生命周期內(nèi)的自我交互。對于一個給定｛類型｝的down事件，我們需要綁定所有必需的事件來完成這個功能，當(dāng)交互已經(jīng)完成后，我們需要清理自己解綁的起始事件。
網(wǎng)站開發(fā)人員，你是唯一一個知道頁面是否應(yīng)該放大或另一個雙擊事件是否必須等待的人。如果只有你需要回調(diào)推遲你應(yīng)該允許一個預(yù)定的動作來延遲。
在接下來鏈接中，你會發(fā)現(xiàn)一個小的、相互間無依賴的tap事件Demo來創(chuàng)造一個多輸入、低延遲的tap點擊事件。Polymer-gestures是一個為tap點擊和其他事件生產(chǎn)開發(fā)的庫。盡管是這個名字有Polymer，但是它是不依賴Polymer庫而且很容易被隔離。
明確的說，實施這個從一開始來說就是一個壞主意，以下這些應(yīng)該僅僅用于教育而不是用于生產(chǎn)環(huán)境。用于生產(chǎn)環(huán)境的庫已經(jīng)存在，例如： FastClick,polymer-gestures和Hammer.js。
Demo：The tap event
Code:taps.js
重要部分在所有開始的地方綁定你的初始事件，這下面處理多輸入的模式是被認為一種保險的方式。
javascript/**
* If there are pointer events, let the platform handle the input
* mechanism abstraction. If not, then it’s on you to handle
* between mouse and touch events.
*/
if (hasPointer) {
tappable.addEventListener(POINTER_DOWN, tapStart, false);
clickable.addEventListener(POINTER_DOWN, clickStart, false);
}
else {
tappable.addEventListener("mousedown", tapStart, false);
clickable.addEventListener("mousedown", clickStart, false);
if (hasTouch) {
tappable.addEventListener("touchstart", tapStart, false);
clickable.addEventListener("touchstart", clickStart, false);
}
}
clickable.addEventListener("click", clickEnd, false);
綁定touch事件需要和渲染性能妥協(xié)，即使它們沒有做任何事，但為了減少這種影響，通常推薦在處理程序開始時候綁定跟蹤事件。別忘了在完成你的事件處理后要清理自己的環(huán)境和解綁跟蹤事件。
javascript/**
* On tapStart we want to bind our move and end events to detect
* whether this is a “tap” action.
* @param {Event} event the browser event object
*/
function tapStart(event) {
// bind tracking events. “bindEventsFor” is a helper that automatically
// binds the appropriate pointer, touch or mouse events based on our
// current event type. Additionally, it saves the event target to give
// us similar behavior to pointer events’ “setPointerCapture” method.
bindEventsFor(event.type, event.target);
if (typeof event.setPointerCapture === "function") {
event.currentTarget.setPointerCapture(event.pointerId);
}
// prevent the cascade
event.preventDefault();
// start our profiler to track time between events
set(event, "tapStart", Date.now());
}
/**
* tapEnd. Our work here is done. Let’s clean up our tracking events.
* @param {Element} target the html element
* @param {Event} event the browser event object
*/
function tapEnd(target, event) {
unbindEventsFor(event.type, target);
var _id = idFor(event);
log("Tap", diff(get(_id, "tapStart"), Date.now()));
setTimeout(function() {
delete events[_id];
});
剩下的這些代碼應(yīng)該能夠很好的自我解釋，事實上，它有很多簿記，實現(xiàn)自定義手勢要求你用瀏覽器事件系統(tǒng)來緊密合作。為了挽救你的受傷和心痛，不要在你自己的代碼庫里做事情。相反你應(yīng)該建立或使用一個強大的抽象，例如Hammer.js,jQuery polyfill的Pointer Events或者polymer-gestures。
總結(jié)一些曾經(jīng)很清楚的事件現(xiàn)在卻是有歧義的，以前click事件用來指有且只有一件事，但是現(xiàn)在在觸摸屏上面需要辨別是雙擊、滾動或者其他操作系統(tǒng)的手勢。
好消息是，我們現(xiàn)在明白了很多用戶的操作習(xí)慣和瀏覽器的響應(yīng)之間的事件級聯(lián)和相互作用，通過在工作中認識的原語，我們自己能夠在我們的項目中為我們的用戶和Web的未來做出更好的決策。
你在構(gòu)建多設(shè)備的網(wǎng)站時，有遇到什么意想不到的問題？你采取什么樣的方法來解決Web上眾多的交互模式？
額外的資源“Pointer Events Finalized, But Apple’s Lack of Support Still a Deal Breaker,”Peter Bright
Getting Touchy: An Introduction to Touch and Pointer Events,包括slides和talk Patrick E. Lauke
“Apple’s Web?” by Tim Kadlec
“Avoiding the 300ms Click Delay, Accessibly,” Tim Kadlec
“Touch taple,” Peter-Paul Koch
“Making the Web ‘Just Work’ With Any Input: Mouse, Touch, and Pointer Events,” Jacob Rossi
FastClick library
Hammer.js
polymer-gestures
Pointer EventsjQuery polyfill
“Implement Custom Gestures,” Google Developers
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85613.html
摘要：從現(xiàn)狀談及性能優(yōu)化原文出處性能優(yōu)化指南如今網(wǎng)絡(luò)發(fā)展迅猛，這對我們構(gòu)建的互聯(lián)網(wǎng)平臺要求也更高。這就說明，我們在開發(fā)時，并沒有站在用戶的角度上換位思考，更別談性能優(yōu)化。因此，我們可通過區(qū)分關(guān)鍵資源并調(diào)整加載的優(yōu)先級來實現(xiàn)性能優(yōu)化。 從web現(xiàn)狀談及性能優(yōu)化 原文出處：《Karolina Szczur: The State of the Web》 性能優(yōu)化指南The Internet is ...
摘要：從現(xiàn)狀談及性能優(yōu)化原文出處性能優(yōu)化指南如今網(wǎng)絡(luò)發(fā)展迅猛，這對我們構(gòu)建的互聯(lián)網(wǎng)平臺要求也更高。這就說明，我們在開發(fā)時，并沒有站在用戶的角度上換位思考，更別談性能優(yōu)化。因此，我們可通過區(qū)分關(guān)鍵資源并調(diào)整加載的優(yōu)先級來實現(xiàn)性能優(yōu)化。 從web現(xiàn)狀談及性能優(yōu)化 原文出處：《Karolina Szczur: The State of the Web》 性能優(yōu)化指南The Internet is ...
摘要：從現(xiàn)狀談及性能優(yōu)化原文出處性能優(yōu)化指南如今網(wǎng)絡(luò)發(fā)展迅猛，這對我們構(gòu)建的互聯(lián)網(wǎng)平臺要求也更高。這就說明，我們在開發(fā)時，并沒有站在用戶的角度上換位思考，更別談性能優(yōu)化。因此，我們可通過區(qū)分關(guān)鍵資源并調(diào)整加載的優(yōu)先級來實現(xiàn)性能優(yōu)化。 從web現(xiàn)狀談及性能優(yōu)化 原文出處：《Karolina Szczur: The State of the Web》 性能優(yōu)化指南The Internet is ...
摘要：標簽前端作者更多文章個人網(wǎng)站 Learning Notes - Understanding the Weird Parts of JavaScript 標簽 ： 前端 JavaScript [TOC] The learning notes of the MOOC JavaScript: Understanding the Weird Parts on Udemy,including...
摘要： Abstract Sockets are used nearly everywhere, but are one of the most severely misunderstood technologies around. This is a 10,000 foot overview of sockets. It’s not really a tutorial - you’ll s...
閱讀 879·2021-11-18 10:02
閱讀 1697·2019-08-30 15:56
閱讀 2576·2019-08-30 13:47
閱讀 2647·2019-08-29 12:43
閱讀 861·2019-08-29 11:19
閱讀 1790·2019-08-28 18:23
閱讀 2677·2019-08-26 12:23
閱讀 3018·2019-08-23 15:29
