这篇文章主要给大家介绍了关于js中touchstart事件与click事件冲突的解决方法，文中通过示例代码将解决的方法介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
前言
移动互联网是未来的发展趋势，现在国内很多互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，当然还有各种APP和web运用。
下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容，下面话不多说了，来一起看看详细的介绍吧。
一 · 业务场景的描述
在对已完成的PC站点进行移动端适配时，我们想要站点在移动设备上有更快的响应速度，以带给用户更好的体验，此时，我们应该使用移动设备专用的事件系统，例如，使用 touchstart 事件代替 click 事件。
为什么这样效果会更好呢？根据Google开发者文档中的描述：
移动设备上的浏览器将会在 click 事件触发时延迟 300ms ，以确保这是一个“单击”事件而非“双击”事件。
而对于 touchstart 事件而言，则会在用户手指触碰屏幕的一瞬间触发所绑定的事件。所以，使用 touchstart 替换 click 事件的意义在于，帮助用户在每次点击时节省 300ms 的时间。在页面频繁需要点击，或者点击发生在动画中，对动画流畅度有较高要求的情境下，使用这种技术是非常必要的。
但是，让我们回到我们的初始场景，在 PC端站点适配移动端时 我们不能简单的进行 touchstart和 click 事件的替换，因为PC并不能识别 touchstart 事件。
二 · 产生冲突的原因
当然，我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题 — 这两个事件在移动设备上会发生冲突。
由于移动设备能够同时识别 touchstart 和 click 事件，因此当用户点击目标元素时，绑定在目标元素上的 touchstart 事件与 click 事件（约300ms后）会依次被触发，也就是说，我们所绑定的回调函数会被执行两次！。这显然不是我们想要的结果。
三 · 解决方案
针对这样的情境，有以下两种解决方案：
（一）使用 preventDefault
第一种解决方案是使用事件对象中的 preventDefault 方法,preventDefault 方法的作用在于：阻止元素默认事件行为的发生，但有意思的是，当我们在目标元素同时绑定 touchstart 和 click 事件时，在 touchstart 事件回调函数中使用该方法，可以阻止后续 click 事件的发生。
这从道理上是讲不通的，毕竟，我们添加的 click 事件并不是元素的“默认事件”，但它确实奏效了，或者说，被浏览器实现了，因此我们可以使用该方法解决移动设备上 touchstart 事件与 click 事件的冲突问题，具体代码如下：
const Button = document.getElementById("targetButton")Button.addEventListener("touchstart", e => { e.preventDefault() console.log("touchstart event!")}) Button.addEventListener("click", e => { e.preventDefault() console.log("click event!")})登录后复制
当你在浏览器上模拟移动设备后点击目标元素，只会在控制台看到 touchstart event! 字段，很显然，click 事件被成功阻止了。
总结
使用该方法的优点在于简单粗暴，直接有效，能够很好的实现我们的目标，但缺点在于， preventDefault 方法为阻止 click 事件的方式是浏览器实现上的，而不是 preventDefault 原理上的，这会带来一些不确定性，虽然我暂时尚未发现该方法失效的具体场景。
（二）基于功能检测绑定事件
我们可以通过判断浏览器是否支持 touchstart 事件来封装元素的点击事件，这样客户端会根据当前环境判定元素应该绑定的事件类型，代码如下：
const Button = document.getElementById("targetButton")const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touchstart'; else return 'click';})(); Button.addEventListener(clickEvent, e => { console.log("things happened!")})登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
微信小程序中实现手指缩放图片的示例代码
基于vue中css预加载使用sass的配置方式详解
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
以上就是JS中touchstart事件与click事件冲突的解决方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753116.html
