aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/conflicting
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-01-16 00:57:29 +0000
committerMDN <actions@users.noreply.github.com>2022-01-16 00:57:29 +0000
commit32ce5de47456ff5d8cb1b2d9163356ce27ffe955 (patch)
tree44e7c321352aaeaf6996c758a2355cde9ac56c70 /files/zh-cn/conflicting
parent2643908ba6acced84a9e92dbd037fc3c62f10b15 (diff)
downloadtranslated-content-32ce5de47456ff5d8cb1b2d9163356ce27ffe955.tar.gz
translated-content-32ce5de47456ff5d8cb1b2d9163356ce27ffe955.tar.bz2
translated-content-32ce5de47456ff5d8cb1b2d9163356ce27ffe955.zip
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/conflicting')
-rw-r--r--files/zh-cn/conflicting/web/api/pointer_events/index.html66
1 files changed, 66 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/api/pointer_events/index.html b/files/zh-cn/conflicting/web/api/pointer_events/index.html
new file mode 100644
index 0000000000..7b579d5250
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/pointer_events/index.html
@@ -0,0 +1,66 @@
+---
+title: 同时支持触屏事件和鼠标事件
+slug: conflicting/Web/API/Pointer_events
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+original_slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>{{domxref("Touch_events","touch")}} 接口使得应用可以提高触屏设备上的用户体验。然而,现在绝大多数的web内容都是为鼠标操作而设计的。因此,即使浏览器支持触屏,也必须要模拟(emulate)鼠标事件,这样即使是那些只能接受鼠标输入的内容,也不需要进行额外修改就可以正常工作。</p>
+
+<p>理想状态下,一个基于触屏的应用不需要去明确指定鼠标输入。然而,由于浏览器必须要模拟(emulate)鼠标事件,很有可能有一些特定的交互问题需要去处理。下面列出了这些交互的细节 ,并指导应用开发者该如何去处理它们。</p>
+
+<h2 id="事件触发">事件触发</h2>
+
+<p>触摸事件标准定义了一些关于触摸和鼠标交互的浏览器要求(有关详细信息,请参阅<a href="https://w3c.github.io/touch-events/#mouse-events">与鼠标事件的交互和单击部分</a>),注意浏览器可以触发触摸事件和鼠标事件以响应相同的用户输入。本节介绍可能影响应用程序的条件。</p>
+
+<p>如果浏览器因单个用户输入而触发触摸和鼠标事件,则浏览器必须在任何鼠标事件之前触发{{event("touchstart")}}。因此,如果应用程序不希望在特定触摸{{domxref("Touch.target","target")}} 元素上触发鼠标事件,则元素的触摸事件处理程序应调用{{domxref("Event.preventDefault()","preventDefault()")}}并且不会调度其他鼠标事件。</p>
+
+<p>这是{{event("touchmove")}}事件处理程序调用的代码片段</p>
+
+<p><code>preventDefault()</code>.</p>
+
+<pre class="brush: js">// touchmove handler
+function process_touchmove(ev) {
+ // Call preventDefault() to prevent any further handling
+ ev.preventDefault();
+}
+</pre>
+
+<h2 id="事件顺序">事件顺序</h2>
+
+<p>虽然触摸和鼠标事件的特定顺序是根据实际情况而定的,但标准表明事件执行顺序是固定的:对于单个输入:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero or more <code>touchmove</code> events, depending on movement of the finger(s)</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>如果 {{event("touchstart")}}, {{event("touchmove")}} 或者 {{event("touchend")}} 在触摸的过程中触发了touchcancel事件,后面的鼠标事件将不会被触发,由此产生的事件序列只是:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero or more <code>touchmove</code> events, depending on movement of the finger(s)</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="社区">社区</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="相关主题和资源">相关主题和资源</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>