diff options
Diffstat (limited to 'files/zh-cn/web/api/pointer_events/index.html')
| -rw-r--r-- | files/zh-cn/web/api/pointer_events/index.html | 483 |
1 files changed, 483 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/pointer_events/index.html b/files/zh-cn/web/api/pointer_events/index.html new file mode 100644 index 0000000000..2a00f157a4 --- /dev/null +++ b/files/zh-cn/web/api/pointer_events/index.html @@ -0,0 +1,483 @@ +--- +title: Pointer events 指针事件 +slug: Web/API/Pointer_events +tags: + - API + - Pointer Events + - 交互 + - 指针事件 +translation_of: Web/API/Pointer_events +--- +<p>{{DefaultAPISidebar("Pointer Events")}}</p> + +<p>目前绝大多数的Web内容都假设用户的指针定点设备为鼠标。然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类<em><a href="#term_pointer_event">指针事件</a></em>。 </p> + +<p>指针事件 - Pointer events 是一类可以为定点设备所触发的DOM事件。它们被用来创建一个可以有效掌握各类输入设备（鼠标、触控笔和单点或多点的手指触摸）的统一的DOM事件模型。所谓 <em><a href="#term_pointer">指针</a></em> 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化Web站点与应用所需的工作，同时也便于提供更加一致与良好的用户体验，无需关心不同用户和场景在输入硬件上的差异。另外，对于某些需要处理特定设备的场景，指针事件也定义了一个 {{domxref("PointerEvent.pointerType","pointerType")}} 属性用以查看触发事件的设备类型。</p> + +<p>这些事件需要能够处理 {{domxref("MouseEvent","mouse events")}} 之类较为通用的指针输入（<code>mousedown/pointerdown</code>, <code>mousemove/pointermove</code>, 等）。 因此，指针事件的类型，很大程度上类似于当前的鼠标事件类型。</p> + +<p>此外，一个指针事件，也同时包含了鼠标事件中所常见的属性（client coordinates, target element, button states，等）以及适用于其他输入设备的新属性：pressure, contact geometry, tilt, 等等。实际上，{{domxref("PointerEvent")}} 接口继承了所有 {{domxref("MouseEvent","MouseEvent")}} 中的属性，以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。</p> + +<h2 id="相关名词">相关名词</h2> + +<dl> + <dt>active buttons state</dt> + <dd>The condition when a <em><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events$edit#term_pointer">pointer</a></em> has a non-zero value for the <code>buttons</code> property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.</dd> +</dl> + +<dl> + <dt>活跃指针 - active pointer</dt> + <dd>任意<em><a href="#term_pointer">指针</a>输入设备都可以产生事件。一个可以产生后继事件的指针可以被认为是一个活跃指针。例如，一个触摸笔处于压下状态时可以认为是活跃的，因为它接下来的抬起或移动都会产生额外的后继事件。</em></dd> + <dt id="term_digitizer">数位设备 - digitizer</dt> + <dd>一个可以检测其表面接触行为的传感设备。通常来说，其所用的传感设备是一个可以感知由某些输入设备（如触控笔、压感笔、手指等）所提供的输入信息的可触摸屏幕。</dd> + <dt id="term_hit_test">命中检测 - hit test</dt> + <dd>浏览器用以检测某一指针事件的目标元素的过程。通常来说，这一过程是通过比照出现在文档或屏幕媒介上的指针位置与视觉布局来实现的。</dd> + <dt id="term_pointer">指针 - pointer</dt> + <dd>某个呈现形式并不确定的硬件，该硬件可以指向一个（或一组）屏幕上特定坐标。典型的指针输入设备有鼠标、触控笔、手指触控点等。</dd> + <dt>指针捕捉 - pointer capture</dt> + <dd>指针捕捉能够允许某些事件的产生。这些事件在指针将要重新指向一些并非通过命中检测而给定元素时触发。</dd> + <dt id="term_pointer_event">指针事件 - pointer event</dt> + <dd>一个被<em><a href="#term_pointer">指针</a>所</em>触发DOM事件。</dd> +</dl> + +<h2 id="相关接口">相关接口</h2> + +<p>首要的接口为 {{domxref("PointerEvent")}} 接口，该接口由一个构造函数{{domxref("PointerEvent.PointerEvent","constructor")}} 加上一些事件类型以及相应全局事件的处理方法构成。</p> + +<p>标准中还包括一些对于 {{domxref("Element")}} 及 {{domxref("Navigator")}} 接口的扩展。接下来的每个部分包含了对于各个接口与属性的简单说明。</p> + +<h3 id="PointerEvent_接口">PointerEvent 接口</h3> + +<p>{{domxref("PointerEvent")}} 接口扩展了 {{domxref("MouseEvent")}} 接口，并含有以下属性（这些属性的可写属性全部为{{readonlyInline}}）。</p> + +<ul> + <li>{{ domxref('PointerEvent.pointerId','pointerId')}} - 对于某个由指针引起的事件的唯一标识。</li> + <li>{{ domxref('PointerEvent.width','width')}} - 以CSS像素计数的宽度属性，取决于指针的接触面的几何构成。</li> + <li>{{ domxref('PointerEvent.height','height')}} - 以CSS像素计数的高度属性，取决于指针的接触面的几何构成。</li> + <li>{{ domxref('PointerEvent.pressure','pressure')}} - 规范化后的指针输入的压力值，取值范围为0到1，0代表硬件可检测到的压力最小值，1代表最大值。</li> + <li>{{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}} The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range <code>-1</code> to <code>1</code>, where <code>0</code> is the neutral position of the control.</li> + <li>{{ domxref('PointerEvent.tiltX','tiltX')}} - the plane angle (in degrees, in the range of -90 to 90) between the Y-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the Y axis.</li> + <li>{{ domxref('PointerEvent.tiltY','tiltY')}} - the plane angle (in degrees, in the range of -90 to 90) between the X-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the X axis.</li> + <li>{{ domxref('PointerEvent.twist','twist')}} The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range <code>0</code> to <code>359</code>.</li> + <li>{{ domxref('PointerEvent.pointerType','pointerType')}} - 表明引发该事件的设备类型（鼠标/笔/触摸等）。</li> + <li>{{ domxref('PointerEvent.isPrimary','isPrimary')}} - 表示该指针是否为该类型指针中的首选指针。</li> +</ul> + +<h3 id="事件类型与全局事件处理">事件类型与全局事件处理</h3> + +<p>指针事件有始终不同的事件类型，其中其中在鼠标事件中有相对应的语义话表示 (<code>down, up, move, over, out, enter, leave</code>)。以下是每个事件类型及所对应的{{domxref("GlobalEventHandlers","Global Event Handler")}}的基本介绍。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Event</th> + <th scope="col">On Event Handler</th> + <th scope="col">Description</th> + </tr> + <tr> + <td>{{event('pointerover')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td> + <td>当定点设备进入某个元素的<a href="#term_hit_test">命中检测</a> 范围时触发。</td> + </tr> + <tr> + <td>{{event('pointerenter')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td> + <td>当定点设备进入某个元素或其子元素的<a href="#term_hit_test">命中检测</a>范围时，或做为某一类不支悬停（hover）状态的设备所触发的poinerdown事件的后续事件时所触发。(详情可见 pointerdown事件类型).</td> + </tr> + <tr> + <td>{{event('pointerdown')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td> + <td>当某指针得以激活时触发。</td> + </tr> + <tr> + <td>{{event('pointermove')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td> + <td>当某指针改变其坐标时触发。</td> + </tr> + <tr> + <td>{{event('pointerup')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td> + <td>当某指针不再活跃时触发。</td> + </tr> + <tr> + <td>{{event('pointercancel')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td> + <td>当浏览器认为某指针不会再生成新的后续事件时触发（例如某设备不再活跃）</td> + </tr> + <tr> + <td>{{event('pointerout')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td> + <td>可能由若干原因触发该事件，包括：定位设备移出了某<a href="term_hit_test">命中检测</a>的边界；不支持悬浮状态的设备发生pointerup事件（见pointerup事件）； 作为 pointercancel event事件的后续事件（见pointercancel事件）；当数位板检测到数位笔离开了悬浮区域时。</td> + </tr> + <tr> + <td>{{event('pointerleave')}}</td> + <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td> + <td>当定点设备移出某元素的<a href="term_hit_test">命中检测</a>边界时触发。对于笔形设备来说，当数位板检测到笔移出了悬浮范围时触发。</td> + </tr> + <tr> + <td>{{event('gotpointercapture')}}</td> + <td>{{domxref('GlobalEventHandlers.ongotpointercapture','ongotpointercapture')}}</td> + <td>当某元素接受到一个指针捕捉时触发。</td> + </tr> + <tr> + <td>{{event('lostpointercapture')}}</td> + <td>{{domxref('GlobalEventHandlers.onlostpointercapture','onlostpointercapture')}}</td> + <td>当针对某个指针的指针捕捉得到释放时触发。</td> + </tr> + </tbody> +</table> + +<h3 id="Element接口扩展">Element接口扩展</h3> + +<p>对于{{domxref("Element")}}接口有以下一些扩展：</p> + +<ul> + <li>{{domxref("Element.setPointerCapture()","setPointerCapture()")}} - 该方法将为进一步的指针事件设置一个特定的目标元素。</li> + <li>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}} - 该方法将释放（并停止）之前对于某一特定的指针事件的指针捕捉。</li> +</ul> + +<h3 id="Navigator对象扩展">Navigator对象扩展</h3> + +<p>属性 {{domxref("Navigator.maxTouchPoints")}} 被设计用来指明在同一时间点所支持的最大的触摸点数量。</p> + +<h2 id="例子">例子</h2> + +<p>该部分包含了一些指针事件接口的一些基本使用案例。</p> + +<h3 id="注册一个事件处理器">注册一个事件处理器</h3> + +<p>该例子为一个特定元素的每一个事件类型注册了相应的处理器。</p> + +<pre class="brush: html notranslate"><html> + <script> + 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; + } + </script> + <body onload="init();"> + <div id="target"> Touch me ... </div> + </body> +</html> +</pre> + +<h3 id="事件属性">事件属性</h3> + +<p>这一例子展示了如何访问一个触摸事件的所有事件属性。</p> + +<pre class="brush: html notranslate"><html> + <script> + 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; + } + </script> + <body onload="init();"> + <div id="target"> Touch me ... </div> + </body> +</html> +</pre> + +<h2 id="确定首选指针">确定首选指针</h2> + +<p>在很多场景中，可能存在多个指针（比如某设备同时拥有触摸屏和鼠标）或者一个指针设备支持多个接触点（例如支持多点触控的触摸屏）。应用开发时，可以使用{{domxref("PointerEvent.isPrimary","isPrimary")}}属性来识别每类指针的一组指针输入中的主要指针。如果应用仅希望对首选指针提供支持，则可以忽略其他的指针事件。</p> + +<p>对于鼠标来说，只有一个指针输入，所以这一输入将一直是首选指针。对于触摸输入来说，当用户在触摸屏幕，且没有其他活跃指针时，会被认做首选指针。对于压感笔输入来说，当用户的笔触开始接触屏幕或平面，且当时没有其他的活跃笔触在接触屏幕时，该输入将被认作首选指针。</p> + +<h2 id="确定按钮状态">确定按钮状态</h2> + +<p>对于某些指针设备来说，比如鼠标或者压感笔，设备上可能有一个或多个按钮可以同时或依次序按动。比如在某个按钮释放后立刻按下其他按钮。为了确定这些按钮的按压状态，指针事件使用{{domxref("MouseEvent.button","button")}}与 {{domxref("MouseEvent.buttons","buttons")}}等{{domxref("MouseEvent")}}接口中的事件 （{{domxref("PointerEvent")}}继承于此）表明相应的状态。下表提供了各类设备的按钮状态与button和buttons属性的属性值对应关系。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">设备按钮状态</th> + <th scope="col">button</th> + <th scope="col">buttons</th> + </tr> + <tr> + <td>自上次事件后，按键、触摸或笔的接触状态没有改变</td> + <td>-1</td> + <td>—</td> + </tr> + <tr> + <td>鼠标移动且无按钮被按压</td> + <td>—</td> + <td>0</td> + </tr> + <tr> + <td>鼠标左键、触摸接触、压感笔接触（无额外按钮被按压）</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>鼠标中键</td> + <td>1</td> + <td>4</td> + </tr> + <tr> + <td>鼠标右键、压感笔笔杆按钮被按压</td> + <td>2</td> + <td>2</td> + </tr> + <tr> + <td>鼠标X1（前进）</td> + <td>3</td> + <td>8</td> + </tr> + <tr> + <td>鼠标X2（后退）</td> + <td>4</td> + <td>16</td> + </tr> + <tr> + <td>压感笔橡皮擦按钮被按压</td> + <td>5</td> + <td> + <p>32</p> + </td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Notice:</strong> The <code>button</code> property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.</p> +</div> + +<h2 id="指针捕捉">指针捕捉</h2> + +<p>指针捕捉允许将某一指针事件，重新指向到一个特定元素，而非经由针对其位置进行<a href="#term_hit_test">命中检测</a>所确定的目标元素。指针捕捉可以用来保证某一元素持续接收到指针事件，即使指针设备的接触点已经离开了元素本身（比如滚动时）。</p> + +<p>以下例子展示了向某一元素设置指针捕捉的过程：</p> + +<pre class="brush: html notranslate"><html> +<script> + function downHandler(ev) { + var el=document.getElementById("target"); + //Element 'target' will receive/capture further events + el.setPointerCapture(ev.pointerId); + } + + function init() { + var el=document.getElementById("target"); + el.onpointerdown = downHandler; + } +</script> +<body onload="init();"> + <div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<p>以下例子展示了当{{event("pointercancel")}} 事件发生时，一个指针捕捉被释放对的过程。该例子中，浏览器在{{event("pointerup")}}或{{event("pointercancel")}}事件发生时，会自动执行这一释放。</p> + +<pre class="brush: html notranslate"><html> + <script> + function downHandler(ev) { + var el=document.getElementById("target"); + // Element "target" will receive/capture further events + el.setPointerCapture(ev.pointerId); + } + + function cancelHandler(ev) { + var el=document.getElementById("target"); + // Release the pointer capture + el.releasePointerCapture(ev.pointerId); + } + + function init() { + var el=document.getElementById("target"); + // Register pointerdown and pointercancel handlers + el.onpointerdown = downHandler; + el.onpointercancel = cancelHandler; + } + </script> + <body onload="init();"> + <div id="target"> Touch me ... </div> + </body> +</html> +</pre> + +<h2 id="touch-action_CSS属性">touch-action CSS属性</h2> + +<p>CSS属性{{cssxref("touch-action")}}被用来指明浏览器是否应当对某一区域的触摸事件应用其默认行为（例如放大或旋转等）。这一属性可以被用在所有元素上，除了：不可替换的行内元素（inline elements）、表格行（table rows）、行组（row groups）、表格列（table columns）、列组（column groups）。</p> + +<p>属性值<code>auto</code>意味着浏览器可以自由应用其默认的触摸行为（对于特定区域），属性值<code>none</code>则会禁止某一区域的浏览器默认触摸行为。 属性值<code>pan-x</code>和<code>pan-y</code>表示由某区域开始的触摸操作仅分别产生水平的或垂直的滚动。属性值<code>manipulation</code>表示希望浏览器认为某元素上的触摸行为仅用于滚动或放大。</p> + +<p>在下面的示例中，浏览器对于<code>div</code>元素的默认触摸响应行为将被禁止。</p> + +<pre class="brush: html notranslate"><html> + <body> + <div style="touch-action:none;">Can't touch this ... </div> + </body> +</html> +</pre> + +<p>在下面的示例中，某些<code>button</code>元素的默认触摸响应行为将被禁止。</p> + +<pre class="brush: css notranslate">button#tiny { + touch-action: none; +} +</pre> + +<p>在下面的示例中，当<code>target</code> 元素被触摸时，仅允许响应其在水平方向上的滚动。</p> + +<pre class="brush: css notranslate">#target { + touch-action: pan-x; +} +</pre> + +<h2 id="与鼠标事件的兼容性">与鼠标事件的兼容性</h2> + +<p>尽管指针事件接口允许应用程序去为各种指针输入设备创建更佳的用户体验，但事实上，目前的大多数web内容仍然是仅为支持鼠标输入而设计的。因此，即使一个浏览器支持了指针事件，它也仍然需要在这些仅支持鼠标设置网页在不做任何修改的情况下继续对其提供支持。理想情况下，通用的指针模型将使得应用不再需要专门为鼠标输入设计相应。然而，因为浏览器仍必须处理鼠标事件，所以可能仍留存一些需要加以处理的兼容性问题。这一部分包含了一些对于开发者可能有用的关于鼠标事件和指针事件的异同点。</p> + +<p>出于对基于鼠标的内容的兼容性考虑，浏览器会将通用的指针事件映射成相应的鼠标事件。 这一事件映射被乘坐兼容性鼠标事件。开发者可以通过取消pointerdown事件相应来阻止某一特定的兼容性鼠标事件的产生，但需要注意以下情况：</p> + +<ul> + <li>鼠标事件仅在指针失效（when the pointer is down）的情况下可以被阻止。</li> + <li>悬浮的指针（比如没有按键按下时的鼠标指针）的事件不能被阻止。</li> + <li>某些鼠标事件，如：mouseover，mouseout，mouseenter，和mouseleave等事件，永远不能够被阻止。</li> +</ul> + +<h2 id="最佳实践">最佳实践</h2> + +<p>这里有一些在使用指针事件时候可以参考的最佳实践：</p> + +<ul> + <li>尽量减少在事件处理器中要必须完成的工作量。</li> + <li>为尽量精确的元素绑定相应的事件响应器（而不是在整个document节点或更高层的dom元素上）。</li> + <li>目标元素（节点）应该有足够的尺寸覆盖最大情况下的接触面（手指触摸的情况尤其典型）。如果目标区域过小，触摸将会引起临近元素的其他意料外的触摸事件。</li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 3')}}</td> + <td>{{Spec2('Pointer Events 3')}}</td> + <td>为 <code>getCoalescedEvent</code> 和 <code>getPredictedEvents</code> 加入新的 API，新的 <code>pointerrawupdate</code> 事件，额外的 <code>touch-action</code> 属性：<code>pan-left</code>、<code>pan-right</code>、<code>pan-up</code>、<code>pan-down</code>。</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>加入 <code>hasPointerCapture</code> 方法，澄清更多边界情况和动态场景。</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.PointerEvent")}}</p> + +<p>在 {{SpecName('Pointer Events 3')}} 规范中，{{cssxref("touch-action", "CSS touch-action")}} 定义了一些新的值，但目前支持这些新值的浏览器实现很有限。</p> + +<h2 id="演示和示例">演示和示例</h2> + +<ul> + <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li> +</ul> + +<h2 id="社区资源">社区资源</h2> + +<ul> + <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li> + <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li> + <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li> +</ul> + +<h2 id="相关主题与资源">相关主题与资源</h2> + +<ul> + <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li> +</ul> |