HTML5触摸事件(touchstart、touchmove和touchend)
<p> HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。</p><p> 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。</p>
<p> 在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：</p>
<p> </p>
<p> <strong>touchstart事件</strong>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。</p>
<p> <strong>touchmove事件</strong>：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。</p>
<p> <strong>touchend事件</strong>：当手指从屏幕上离开的时候触发。</p>
<p> <strong>touchcancel事件</strong>：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。</p>
<p> </p>
<p> 上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。</p>
<p> </p>
<p> <strong>touches</strong>：表示当前跟踪的触摸操作的touch对象的数组。</p>
<p> <strong>targetTouches</strong>：特定于事件目标的Touch对象的数组。</p>
<p> <strong>changeTouches</strong>：表示自上次触摸以来发生了什么改变的Touch对象的数组。</p>
<p> </p>
<p> 每个Touch对象包含的属性如下。</p>
<p> </p>
<p> <strong>clientX</strong>：触摸目标在视口中的x坐标。</p>
<p> <strong>clientY</strong>：触摸目标在视口中的y坐标。</p>
<p> <strong>identifier</strong>：标识触摸的唯一ID。</p>
<p> <strong>pageX</strong>：触摸目标在页面中的x坐标。</p>
<p> <strong>pageY</strong>：触摸目标在页面中的y坐标。</p>
<p> <strong>screenX</strong>：触摸目标在屏幕中的x坐标。</p>
<p> <strong>screenY</strong>：触摸目标在屏幕中的y坐标。</p>
<p> <strong>target</strong>：触目的DOM节点目标。</p>
<p> </p>
<p> 上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_596031" class="syntaxhighlightercss">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">function load (){ </code></div>
<div class="line number2 index1 alt1"><code class="css spaces"> </code> </div>
<div class="line number3 index2 alt2"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchstart'</code><code class="css plain">,touch, false); </code></div>
<div class="line number4 index3 alt1"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchmove'</code><code class="css plain">,touch, false); </code></div>
<div class="line number5 index4 alt2"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchend'</code><code class="css plain">,touch, false); </code></div>
<div class="line number6 index5 alt1"><code class="css spaces"> </code> </div>
<div class="line number7 index6 alt2"><code class="css spaces"> </code><code class="css plain">function touch (event){ </code></div>
<div class="line number8 index7 alt1"><code class="css spaces"> </code><code class="css plain">var event = event || window.event; </code></div>
<div class="line number9 index8 alt2"><code class="css spaces"> </code> </div>
<div class="line number10 index9 alt1"><code class="css spaces"> </code><code class="css plain">var oInp = document.getElementById(</code><code class="css string">"inp"</code><code class="css plain">); </code></div>
<div class="line number11 index10 alt2"><code class="css spaces"> </code> </div>
<div class="line number12 index11 alt1"><code class="css spaces"> </code><code class="css plain">switch(event.type){ </code></div>
<div class="line number13 index12 alt2"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchstart"</code><code class="css plain">: </code></div>
<div class="line number14 index13 alt1"><code class="css spaces"> </code><code class="css plain">oInp.innerHTML = </code><code class="css string">"Touch started ("</code> <code class="css plain">+ event.touches[</code><code class="css value">0</code><code class="css plain">].clientX + </code><code class="css string">","</code> <code class="css plain">+ event.touches[</code><code class="css value">0</code><code class="css plain">].clientY + </code><code class="css string">")"</code><code class="css plain">; </code></div>
<div class="line number15 index14 alt2"><code class="css spaces"> </code><code class="css plain">break; </code></div>
<div class="line number16 index15 alt1"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchend"</code><code class="css plain">: </code></div>
<div class="line number17 index16 alt2"><code class="css spaces"> </code><code class="css plain">oInp.innerHTML = </code><code class="css string">"<br>Touch end ("</code> <code class="css plain">+ event.changedTouches[</code><code class="css value">0</code><code class="css plain">].clientX + </code><code class="css string">","</code> <code class="css plain">+ event.changedTouches[</code><code class="css value">0</code><code class="css plain">].clientY + </code><code class="css string">")"</code><code class="css plain">; </code></div>
<div class="line number18 index17 alt1"><code class="css spaces"> </code><code class="css plain">break; </code></div>
<div class="line number19 index18 alt2"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchmove"</code><code class="css plain">: </code></div>
<div class="line number20 index19 alt1"><code class="css spaces"> </code><code class="css plain">event.preventDefault(); </code></div>
<div class="line number21 index20 alt2"><code class="css spaces"> </code><code class="css plain">oInp.innerHTML = </code><code class="css string">"<br>Touch moved ("</code> <code class="css plain">+ event.touches[</code><code class="css value">0</code><code class="css plain">].clientX + </code><code class="css string">","</code> <code class="css plain">+ event.touches[</code><code class="css value">0</code><code class="css plain">].clientY + </code><code class="css string">")"</code><code class="css plain">; </code></div>
<div class="line number22 index21 alt1"><code class="css spaces"> </code><code class="css plain">break; </code></div>
<div class="line number23 index22 alt2"><code class="css spaces"> </code><code class="css plain">} </code></div>
<div class="line number24 index23 alt1"><code class="css spaces"> </code> </div>
<div class="line number25 index24 alt2"><code class="css spaces"> </code><code class="css plain">} </code></div>
<div class="line number26 index25 alt1"><code class="css plain">} </code></div>
<div class="line number27 index26 alt2"><code class="css plain">window.addEventListener(</code><code class="css string">'load'</code><code class="css plain">,load, false);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p>对上面的代码稍微做点改动，可以判断水平方向滑动的方向，然后左相应的动作，如下：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_416321" class="syntaxhighlightercss">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
<div class="line number35 index34 alt2">35</div>
<div class="line number36 index35 alt1">36</div>
<div class="line number37 index36 alt2">37</div>
<div class="line number38 index37 alt1">38</div>
<div class="line number39 index38 alt2">39</div>
<div class="line number40 index39 alt1">40</div>
<div class="line number41 index40 alt2">41</div>
<div class="line number42 index41 alt1">42</div>
<div class="line number43 index42 alt2">43</div>
<div class="line number44 index43 alt1">44</div>
<div class="line number45 index44 alt2">45</div>
<div class="line number46 index45 alt1">46</div>
<div class="line number47 index46 alt2">47</div>
<div class="line number48 index47 alt1">48</div>
<div class="line number49 index48 alt2">49</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="css plain">function load(){</code></div>
<div class="line number2 index1 alt1"><code class="css spaces"> </code> </div>
<div class="line number3 index2 alt2"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchstart'</code><code class="css plain">,touch, false);</code></div>
<div class="line number4 index3 alt1"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchmove'</code><code class="css plain">,touch, false);</code></div>
<div class="line number5 index4 alt2"><code class="css spaces"> </code><code class="css plain">document.addEventListener(</code><code class="css string">'touchend'</code><code class="css plain">,touch, false);</code></div>
<div class="line number6 index5 alt1"><code class="css spaces"> </code> </div>
<div class="line number7 index6 alt2"><code class="css spaces"> </code><code class="css plain">function touch (event){</code></div>
<div class="line number8 index7 alt1"><code class="css spaces"> </code><code class="css plain">var event = event || window.event;</code></div>
<div class="line number9 index8 alt2"><code class="css spaces"> </code> </div>
<div class="line number10 index9 alt1"><code class="css spaces"> </code><code class="css plain">var oInp = document.getElementById(</code><code class="css string">"inp"</code><code class="css plain">);</code></div>
<div class="line number11 index10 alt2"><code class="css spaces"> </code><code class="css plain">var distance,clientX_start,clientX_end,</code></div>
<div class="line number12 index11 alt1"><code class="css spaces"> </code><code class="css plain">minRange=</code><code class="css value">10</code><code class="css plain">;</code></div>
<div class="line number13 index12 alt2"><code class="css spaces"> </code><code class="css plain">this.clientX_start;</code></div>
<div class="line number14 index13 alt1"><code class="css spaces"> </code><code class="css plain">this.direction;</code></div>
<div class="line number15 index14 alt2"> </div>
<div class="line number16 index15 alt1"><code class="css spaces"> </code><code class="css plain">this.callbackFun=function(){</code></div>
<div class="line number17 index16 alt2"><code class="css spaces"> </code><code class="css plain">if(this.direction==</code><code class="css string">'ltr'</code><code class="css plain">) {</code></div>
<div class="line number18 index17 alt1"><code class="css spaces"> </code><code class="css plain">console.log(</code><code class="css string">'从左往右'</code><code class="css plain">);</code></div>
<div class="line number19 index18 alt2"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number20 index19 alt1"><code class="css spaces"> </code><code class="css plain">else {</code></div>
<div class="line number21 index20 alt2"><code class="css spaces"> </code><code class="css plain">console.log(</code><code class="css string">'从右往左'</code><code class="css plain">);</code></div>
<div class="line number22 index21 alt1"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number23 index22 alt2"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number24 index23 alt1"><code class="css spaces"> </code><code class="css plain">switch(event.type){</code></div>
<div class="line number25 index24 alt2"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchstart"</code><code class="css plain">:</code></div>
<div class="line number26 index25 alt1"><code class="css spaces"> </code><code class="css plain">clientX_start=event.touches[</code><code class="css value">0</code><code class="css plain">].clientX;</code></div>
<div class="line number27 index26 alt2"><code class="css spaces"> </code><code class="css plain">this.clientX_start=clientX_start;</code></div>
<div class="line number28 index27 alt1"><code class="css spaces"> </code><code class="css plain">break;</code></div>
<div class="line number29 index28 alt2"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchend"</code><code class="css plain">:</code></div>
<div class="line number30 index29 alt1"><code class="css spaces"> </code><code class="css plain">this.callbackFun();</code></div>
<div class="line number31 index30 alt2"><code class="css spaces"> </code><code class="css plain">break;</code></div>
<div class="line number32 index31 alt1"><code class="css spaces"> </code><code class="css plain">case </code><code class="css string">"touchmove"</code><code class="css plain">:</code></div>
<div class="line number33 index32 alt2"><code class="css spaces"> </code><code class="css plain">event.preventDefault();</code></div>
<div class="line number34 index33 alt1"><code class="css spaces"> </code> </div>
<div class="line number35 index34 alt2"><code class="css spaces"> </code><code class="css plain">clientX_end = event.changedTouches[</code><code class="css value">0</code><code class="css plain">].clientX;</code></div>
<div class="line number36 index35 alt1"><code class="css spaces"> </code><code class="css plain">//判断移动的方向</code></div>
<div class="line number37 index36 alt2"><code class="css spaces"> </code><code class="css plain">distance=clientX_end-this.clientX_start;</code></div>
<div class="line number38 index37 alt1"><code class="css spaces"> </code><code class="css plain">if(this.clientX_start+minRange<clientX_end) {</code></div>
<div class="line number39 index38 alt2"><code class="css spaces"> </code><code class="css plain">this.direction=</code><code class="css string">'ltr'</code><code class="css plain">;</code></div>
<div class="line number40 index39 alt1"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number41 index40 alt2"><code class="css spaces"> </code><code class="css plain">else if(this.clientX_start-minRange>clientX_end){</code></div>
<div class="line number42 index41 alt1"><code class="css spaces"> </code><code class="css plain">this.direction=</code><code class="css string">'rtl'</code><code class="css plain">;</code></div>
<div class="line number43 index42 alt2"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number44 index43 alt1"><code class="css spaces"> </code><code class="css plain">break;</code></div>
<div class="line number45 index44 alt2"><code class="css spaces"> </code><code class="css plain">} </code></div>
<div class="line number46 index45 alt1"><code class="css spaces"> </code><code class="css plain">}</code></div>
<div class="line number47 index46 alt2"><code class="css plain">}</code></div>
<div class="line number48 index47 alt1"> </div>
<div class="line number49 index48 alt2"><code class="css plain">window.addEventListener(</code><code class="css string">'load'</code><code class="css plain">,load, false);</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
努力到无能为力，拼搏到感动自己。
欢迎大家在下方多多评论。<br><br>
来源：https://www.cnblogs.com/wasbg/p/10951926.html
頁:
[1]