触摸事件热门博客列表

百度网盘课程

通用入口链接！10000G.课程都有！一起学习吧！

立即点击↓ 获取课程！

单指操作

为了更深入地了解事件，我们现在做一个简单的DEMO。

HTML代码

！='en'=GBK'UTF-8' mobile touch()事件=''='=设备宽度，初始比例=1，最小比例=1，最大比例=1，用户可缩放=无'/style # touch log { padding :12 width :100%；box-size : border-box；height:300px}/style/header dylive=' touch log '此处显示触摸信息/div/body/html

JavaScript代码

script varobj=document . GetElementbyID(' TouchLog ')；obj . AddEventListener(' touch start '，ShowMSG)；functionshowMsg(ev){ console . log(ev . touchs)；console . log(ev . TargetTouchs)；console . log(ev . ChangedTouches)；}/脚本

touchstart事件绑定在上面，其他两个事件使用方式相同，只是触发时间点不同。运行上述代码将输出如下所示的结果：

也许你会问：为什么他们的数据都一样？其实很好理解。当您按下屏幕以触发touchstart时，您将执行showMsg()方法。不如换成碰招？毫不奇怪，当你移动手指时，第一组中的三个触摸列表是相同的。为什么说第一组？因为touchmove只有在移动手指的时候才会触发，所以连续移动手指会触发很多次，自然会出现多组数据。但对touchend来说有点不同。您可以运行以下代码来查看touchend和其他两者之间的区别：

scriptvartouchLog=document . getelementbyid(' touchLog ')；touch log . addeventlistener(' touch start '，showMsgTouchstart)；functionshowMsgTouchstart(ev){ console . log('-touch start-')；console . log(ev . touchs)；console . log(ev . TargetTouchs)；console . log(ev . ChangedTouches)；} TouchLog . AddEventListener(' touch move '，showMSgtouchMove)；functionshowMsgTouchmove(ev){ console . log('-touch move-')；cons触摸事件热门博客列表ole . log(ev . touchs)；console . log(ev . TargetTouchs)；console . log(ev . ChangedTouches)；} TouchLog . addevent listener(' touch end '，showMSgtouchend)；functionshowMsgTouchend(ev){ console . log('-touch end-')；console . log(ev . touchs)；console . log(ev . TargetTouchs)；console . log(ev . ChangedTouches)；}/脚本

运行后，您会发现touchend的touch和targetTouches中没有触摸对象，长度值都为零，如下所示：

在这里我们可以做另一个更有趣的测试，就是手指接触到目标元素后，滑出目标元素。以上三个事件对应的touches、targetTouches和changedTouches的输出是什么？会一样吗？

如果不出意外

1.touchesstart事件：touch、targetTouches和changedTouches相同。

2.touchesmove事件：touch、targetTouches和changedTouches是一样的(还会有多组数据，原因上面已经分析过了)。

3.触摸事件：当您的手指离开屏幕时，即当触摸事件被触发时，触摸的长度和目标触摸的触摸列表也为0，即没有触摸对象。

因此，在使用触摸事件时，需要注意的是，只有改变的触摸才会触摸到对象。但是，TouchList对象中的目标属性值是div#touchLog，这意味着无论您的手指在触摸屏后面是在目标元素上还是滑出目标元素，目标属性值都是div#touchLog。只要碰到屏幕，力的值就是1，所以我感觉这个力在这里没有用。

多指操作

我们先来看看下面的代码，有条件的话请在手机上访问：http://yun kus.com/demo/mobile-touch-event/multi-finger-touch start . htm。

scriptvarobj=document.getElementById("touchLog");obj.addEventListener("touchstart",showMsg);functionshowMsg(ev){obj.innerHTML="";vartouchesStr="";vartargetTouchesStr="";for(vari=0;iev.touches.length;i++){touchesStr+="identifier："+ev.touches[i].identifier+"，x轴坐标："+ev.touches[i].clientX+"brtargetTouchesStr+="identifier："+ev.targetTouches[i].identifier+"，x轴坐标："+ev.targetTouches[i].clientX+"br}obj.innerHTML="下面是ev.touches数据：br"+touchesStr+"br下面是ev.targetTouches数据：br"+targetTouchesStr+"br下面是ev.changedTouches数据：br"+"identifier："+ev.changedTouches[0].identifier+"，x轴坐标："+ev.changedTouches[0].clientX+"br}/script

访问http://yunkus.com/demo/mobile-touch-event/multi-finger-touchmove.html查看touchmove事件触发时的效果，touchmove事件触发后changedTouches里的touch对象就不只一个了，而是跟其它两个TouchList列表一样。

访问http://yunkus.com/demo/mobile-touch-event/multi-finger-touchend.html查看touchend事件触发时的效果，touchmove事件触发后就只有changedTouches里有touch且只有一个touch对象了，不管你同时在屏幕上放了多少根手指，这个touch对象对应的是你最后一次离开屏幕的那根手指。

上面的三个demo都会输出事件触发时的touches、targetTouches和changedTouches里的identifier值，以及一个clientX值。clientX用于让你通过x的坐标来判断哪根手指对应哪个identifier的。对于touchstart事件而言，因为changedTouches里总是保存一个touch对象，所以没有遍历，而是直接通过下标访问。从上面我们可以得知有touchstart事件中touches、targetTouches和changedTouches是有区别的：changedTouches下只有一个touch对象，这个对象对应着触发事件最后一根发生改变（比如：最后触摸屏幕）的手指。这也就是为什么changedTouches里只有一个touch对象的原因，因为某一时刻下总是只有一个手指在变化。

但是也不能以偏盖全，因为touchmove事件中的changedTouches里就不只一个，而是跟touches和targetTouches同样有多个touch对象。

正如前面所说的touchend只有changedTouches列表里只有一个touch对象，这个对象对应着最后一根手指发生的改变（比如：最后离开屏幕）的手指。

通过研究单指操作跟多指操作，就可以让我们对touch事件了解得更加立体，到位。

默认事件

在移动端手指操作时会默认触发一些行为，比如：滚动，缩放。上面的例子是没有阻止触摸事件的默认行为的。所以当你测试上面multi-finger-touchmove.html这个例子时，你会发现有时候你会感到很无助，页面很容易发生缩放行为，甚至影响到测试效果。要想阻止触摸事件的默认行为也非常地简单只需要添加如下代码就可以了：

document.addEventListener("touchstart",function(ev){ev.preventDefault();});

添加触摸事件的阻止默认行为的好处也不仅仅只有这一个。

1.在IOS10下设置meta禁止用户缩放是没有效果的，使用ev.preventDefault();就可以实现禁止用户缩放页面。

2.解决IOS10下溢出隐藏（不起作用）的问题。

3.禁止系统默认的滚动条（如：横向滚动条）、以及橡皮筋效果。

4.禁止长按选中文字、选中图片、系统默认菜单。

5.解决点透问题。

虽然有那么多好处，需要注意的是此时也会带来一些问题，比如：input不能获取焦点了。不过你可以通过单独的给input标签添加touchstart事件，并且阻止其冒泡就可以让input标签重生了。

varinputObj=document.getElementsByTagName("input")[0];document.addEventListener("touchstart",function(ev){ev.preventDefault();});inputObj.addEventListener("touchstart",function(ev){ev.stopPropagation();});

这里有一个Demo，通过touch的相关事件实现的一个移动端焦点图切换效果：http://yunkus.com/demo/mobile-touch-event/。

vant man vant组件

别瞎说，举个例子就好

-=img-==-text=no more @ load===-images/intor . pngv-for=item inlist 3360 key=item//van-list/div/templatescriptordefault { data(){ return { list :[]，loading 3330] }，methods : { onload(){ console . log(触发器onload事件)；//异步更新数据setTimeout(()={ for(leti=0；i10I){ this . list . push(this . list . length 1)；}//加载状态this.loading=false结束；//如果(此。list.length=40) {this。finished=true}}，500)；} } }；/script stylelang=scss . img-container { padd :15 px；背景# fff}。img { width :100%；}/style

看到我的例子，基本上和官方的例子一样，只是van-cell改成了img

但是连续触发了两次。

解决办法

后来觉得图片有异步加载过程。当图片没有到达onload事件时，不渲染，宽度和高度只有0，0。Vant的底部事件判断在此之前。它会瞬间判断当前空间没有被填满，会立刻重新加载

方法：在css中添加最小高度：100像素

stylelang=scss。img-容器

{ padding:15px背景# fff}。img { width :100%；最小高度：100px//限制最小高度}/样式

打断一下，说一句粗鲁的话：tm又骗我了

标签： #触摸事件热门博客列表