blob: 620ce654d3dbb3258a743db6d234d454137049e7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: 'HTMLElement: pointercancel event'
slug: Web/API/HTMLElement/pointercancel_event
translation_of: Web/API/HTMLElement/pointercancel_event
---
<div>{{APIRef}}</div>
<p><span class="seoSummary">当浏览器认为不再会有更多的指针事件, 或者在 {{event("pointerdown")}} 事件触发之后用户滚动或者缩放窗口，<strong><code>pointercancel</code></strong> 事件被触发。</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("PointerEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code></td>
</tr>
</tbody>
</table>
<p>常见需要 <code>pointercancel</code> 事件的地方：</p>
<ul>
<li>用户在使用指针设备时按了硬件按钮，如用户打开任务切换界面或者按下手机的“Home”键；</li>
<li>指针正在使用时屏幕旋转；</li>
<li>浏览器认为用户不小心按了指针设备。例如，用户把手掌放在触摸屏上，触发了手掌检测；</li>
<li>{{cssxref("touch-action")}} CSS 属性不允许继续输入。</li>
</ul>
<div class="note">
<p>在 <code>pointercancel</code> 事件触发后，浏览器会按顺序发送 {{event("pointerout")}} 以及 {{event("pointerleave")}}。</p>
</div>
<h2 id="示例">示例</h2>
<p>使用 <code>addEventListener()</code>:</p>
<pre class="brush: js notranslate">const para = document.querySelector('p');
para.addEventListener('pointercancel', (event) => {
console.log('Pointer event cancelled');
});</pre>
<p>使用 <code>onpointercancel</code> 事件句柄属性:</p>
<pre class="brush: js notranslate">const para = document.querySelector('p');
para.onpointercancel = (event) => {
console.log('Pointer event cancelled');
};</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
</tr>
<tr>
<td>{{SpecName('Pointer Events', '#the-pointercancel-event')}}</td>
<td>{{Spec2('Pointer Events')}}</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.HTMLElement.pointercancel_event")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>Related events
<ul>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
<li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
</ul>
</li>
<li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> event handler property</li>
<li>This event on <code>Document</code> targets: <code><a href="/en-US/docs/Web/API/Document/pointercancel_event">pointercancel</a></code> event</li>
</ul>
|
