[TOC] ## 概述 可以監控 mouse,pen,touch 等 事件列表 ``` onpointerover //當定點設備進入某個元素的命中檢測 范圍時觸發 onpointerdown //當某指針得以激活時觸發。 onpointermove //當某指針改變其坐標時觸發。 onpointerup //當某指針不再活躍時觸發。 onpointercancel //當瀏覽器認為某指針不會再生成新的后續事件時觸發 onpointerout //可能由若干原因觸發該事件，包括：定位設備移出了某命中檢測的邊界 onpointerleave //當定點設備移出某元素的命中檢測邊界時觸發 ongotpointercapture //當某元素接受到一個指針捕捉時觸發。 onlostpointercapture //當針對某個指針的指針捕捉得到釋放時觸發。 ``` ## 示例 ### 注冊事件 ``` function over_handler(event) { } function enter_handler(event) { } function down_handler(event) { } function move_handler(event) { } function up_handler(event) { } function cancel_handler(event) { } function out_handler(event) { } function leave_handler(event) { } function gotcapture_handler(event) { } function lostcapture_handler(event) { } function init() { var el=document.getElementById("target"); // Register pointer event handlers el.onpointerover = over_handler; el.onpointerenter = enter_handler; el.onpointerdown = down_handler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcapture_handler; el.lostpointercapture = lostcapture_handler; } ``` ## 訪問一個觸摸事件的所有事件屬性 ``` var id = -1; function process_id(event) { // Process this event based on the event's identifier } function process_mouse(event) { // Process the mouse pointer event } function process_pen(event) { // Process the pen pointer event } function process_touch(event) { // Process the touch pointer event } function process_tilt(tiltX, tiltY) { // Tilt data handler } function process_pressure(pressure) { // Pressure handler } function process_non_primary(event) { // Pressure handler } function down_handler(ev) { // Calculate the touch point's contact area var area = ev.width * ev.height; // Compare cached id with this event's id and process accordingly if (id == ev.identifier) process_id(ev); // Call the appropriate pointer type handler switch (ev.pointerType) { case "mouse": process_mouse(ev); break; case "pen": process_pen(ev); break; case "touch": process_touch(ev); break; default: console.log("pointerType " + ev.pointerType + " is Not suported"); } // Call the tilt handler if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY); // Call the pressure handler process_pressure(ev.pressure); // If this event is not primary, call the non primary handler if (!ev.isPrimary) process_non_primary(evt); } function init() { var el=document.getElementById("target"); // Register pointerdown handler el.onpointerdown = down_handler; } ```