/* Bind to either Pointer Events or traditional touch/mouse */if (window.PointerEvent) {
// if Pointer Events are supported, only listen to pointer events
target.addEventListener("pointerdown", function(e) {
// if necessary, apply separate logic based on e.pointerType// for different touch/pen/mouse behavior
...
});
...
} else {
// traditional touch/mouse event handlers
target.addEventListener('touchstart', function(e) {
// prevent compatibility mouse events and click
e.preventDefault();
...
});
...
target.addEventListener('mousedown', ...);
...
}
// additional event listeners for keyboard handling
...
<divstyle="position:absolute; top:0px; left:0px; width:100px;height:100px;"></div><script>window.addEventListener("pointerdown", assignPenColor);
window.addEventListener("pointermove", assignPenColor);
const colorMap = newMap();
functionassignPenColor(event) {
const uniqueId = event.persistentDeviceId;
// Check if a unique Id exists.if (uniqueId == 0) {
return;
}
// Check if a color has been assigned to the device.if (map.has(uniqueId)) {
return;
}
// Assign a color to the device.let newColor = getNewColor();
map.set(uniqueId, newColor);
return newColor;
}
functiongetNewColor() {
/* return some color value */
}
</script>
myLink.addEventListener("auxclick", function(e) {
if (e.button === 1) {
// This would prevent the default behavior which is for example// opening a new tab when middle clicking on a link.
e.preventDefault();
// Do something else to handle middle button click like taking// care of opening link or non-link buttons in new tabs in a way// that fits the app. Other actions like closing a tab in a tab-strip// which should be done on the click action can be done here too.
}
});
myDiv.addEventListener("contextmenu", function(e) {
// This call makes sure no context menu is shown// to interfere with page receiving the events.
e.preventDefault();
});
myDiv.addEventListener("auxclick", function(e) {
if (e.button === 2) {
// Do something else to handle right button click like opening a// customized context menu inside the app.
}
});
<divstyle="touch-action: none;">
This element receives pointer events for all direct manipulation interactions that otherwise lead to panning or zooming.
</div>
<divstyle="overflow: auto;"><divstyle="touch-action: none;">
This element receives pointer events for all direct manipulation interactions that otherwise lead to panning or zooming.
</div><div>
Direct manipulation interactions on this element MAY be consumed for manipulating the parent.
</div></div>
<divstyle="overflow: auto;"><divstyle="touch-action: pan-y;"><divstyle="touch-action: pan-x;">
This element receives pointer events for all direct manipulation interactions because
it allows only horizontal panning yet an intermediate ancestor
(between it and the scrollable element) only allows vertical panning.
Therefore, no direct manipulation behaviors for panning/zooming are
handled by the user agent.
</div></div></div>
<divstyle="overflow: auto;"><divstyle="touch-action: pan-y pan-left;"><divstyle="touch-action: pan-x;">
This element receives pointer events when not panning to the left.
</div></div></div>
<style>/* Disable intrinsic user agent direct manipulation behaviors (such as panning or zooming)
so that all events on the canvas element are given to the application instead. */canvas { touch-action: none; }
</style><canvasid="drawSurface"width="500px"height="500px"style="border:1px solid black;"></canvas><script>const canvas = document.getElementById("drawSurface"),
context = canvas.getContext("2d");
canvas.addEventListener("pointermove", (e)=> {
if (e.getCoalescedEvents) {
for (let coalesced_event of e.getCoalescedEvents()) {
paint(coalesced_event); // Paint all raw/non-coalesced points
}
} else {
paint(e); // Paint the final coalesced point
}
});
functionpaint(event) {
if (event.buttons>0) {
context.fillRect(event.clientX, event.clientY, 5, 5);
}
}
</script>
let predicted_points = [];
window.addEventListener("pointermove", function(event) {
// Clear the previously drawn predicted points.for (let e of predicted_points.reverse()) {
clearPoint(e.pageX, e.pageY);
}
// Draw the actual movements that happened since the last received event.for (let e of event.getCoalescedEvents()) {
drawPoint(e.pageX, e.pageY);
}
// Draw the current predicted points to reduce the perception of latency.
predicted_points = event.getPredictedEvents();
for (let e of predicted_points) {
drawPoint(e.pageX, e.pageY);
}
});
衷心感谢许多为本规范提出建议和方案的人，其中一些已被纳入本文件。本组主席感谢以下过去和现在的小组成员及参与者所作的贡献：Mustaq Ahmed, Arthur Barstow, Ben Boyle, Matt Brubeck, Rick Byers, Marcos Cáceres, Cathy Chan, Bo Cupp, Domenic Denicola, Ted Dinklocker, Adam Ettenberger, Robert Flack, Dave Fleck, Mike Fraser, Ella Ge, Olga Gerchikov, Scott González, Kartikaya Gupta, Dominique Hazael-Massieux, Philippe Le Hégaret, Hayato Ito, Patrick Kettner, Patrick H. Lauke, Scott Low, Sangwhan Moon, Masayuki Nakano, Olli Pettay, Addison Phillips, Alan Pyne, Antoine Quint, Jacob Rossi, Kagami Sascha Rosylight, Doug Schepers, Ming-Chou Shih, Brenton Simpson, Dave Tapuska, Liviu Tinta, Asir Vedamuthu, Lan Wei, Jeffrey Yasskin, Navid Zolghadr。
特别感谢那些帮助开创该模型第一版的人，特别包括：Charu Chandiram, Peter Freiling, Nathan Furtwangler, Thomas Olsen, Matt Rakow, Ramu Ramanathan, Justin Rogers, Jacob Rossi, Reed Townsend 和 Steve Wright。
HTML 标准. Anne van Kesteren; Domenic Denicola; Dominic Farolino; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. 活标准. URL: https://html.whatwg.cn/multipage/
