[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; } ```