diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlelement/pointercancel_event | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/htmlelement/pointercancel_event')
-rw-r--r-- | files/zh-cn/web/api/htmlelement/pointercancel_event/index.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html b/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html new file mode 100644 index 0000000000..620ce654d3 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html @@ -0,0 +1,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> |