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!")
})

总结

该方法的优点在于，我们通过增加一次判断，为元素减少了一个不必要的事件绑定，从而避免了 touchstart 与 click 事件的冲突问题。这种方法避免了我们书写两次同样的代码，并且相较于第一种方法更加符合逻辑，因此是我所推荐的。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • FireFox与IE 下js兼容触发click事件的代码
  • js创建一个input数组并绑定click事件的方法
  • 关于javaScript注册click事件传递参数的不成功问题
  • javascript中onclick(this)用法介绍
  • js给onclick事件赋值，动态传参数实例解说
  • JavaScript给按钮绑定点击事件（onclick）的方法
  • js动态添加的DIV中的onclick事件简单实例
赞 (0)

相关推荐

  • js创建一个input数组并绑定click事件的方法

    复制代码 代码如下: </pre><pre name="code" class="javascript"><html> <body> <input type="button" name="input[]" value="按钮1" /><br /> <input type="button" name="

  • js给onclick事件赋值，动态传参数实例解说

    我们先看看错误的例子 Html代码 复制代码 代码如下: <body> <input id="certid" type="text" value="123456" > <input id="btn" type="button" value="button" onclick=""> </body> Javascript代码

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • FireFox与IE 下js兼容触发click事件的代码

    <a href="#" id="a3" onclick="test()" style="display:none"></a> <input type="button" value="clck" onclick="test2('a3');"/> <script language="javascript">

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • 关于javaScript注册click事件传递参数的不成功问题

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限.柜员类型权限.岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制.造成了这一功能模块的实现上javaScript代码比java代码负责的情况. 而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • 谈谈JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

  • 浅析Node.js中使用依赖注入的相关问题及解决方法

    最近,我转向使用依赖注入来帮助理解分离代码的简单途径,并有助测试.然而,Node.js中的模块依赖Node提供的系统API,这很难判断私有依赖被恰当的使用.一般的依赖注入很难在这种情况下使用,但现在不要放弃希望. requireCauses 问题 Node.js很容易依照需求导入依赖.它运行的很好,并且比AMD模式加载器例如RequireJS要简单.当我们模拟那些依赖的时候问题就来了.如果Node.js中模型的加载是受控的,我们怎么做才能控制让伪对象在测试期间被使用到?我们可以使用Node的vm

  • vue.js 中使用（...）运算符报错的解决方法

    今天在起别人项目的时候, 发现报错. 这个错误是,项目中不识别es6的扩展运算符, 解决方式很简单. // 第一步 cnpm install babel-plugin-transform-object-rest-spread // 第二步 看一下你的 .babelrc 里面是否有识别es6语法的配置 { "presets": [ ["env", { "modules": false, "targets": { "br

  • js中的onchange和onpropertychange (onchange无效的解决方法)

    笔者注:今天我在用到onchange事件时没有任何反应,最后翻查资料才知道Onchange的局限性和不稳定性.而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下(幸亏有这个性能,做出的东西老板娘很满意 o(∩_∩)o...). 本人也比较懒,自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来捕获.例如一个 <input name="text1&qu

  • JS中touchstart事件与click事件冲突的解决方法

    前言 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 cl

  • 解决vue的touchStart事件及click事件冲突问题

    一 .问题: 今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个事件.因为移动端设备上的click事件触发是会延迟300ms,所以touchStart事件会先触发后再触发click事件.这样导致每次都要执行两次,这样毫无意义.这里提醒下,PC是无法识别touch相关事件 二.解决方式 (1)preventDefault方法 通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决.在touchstart中添

  • 深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量.但是HTML标签属性注册处理程序就是一个例外.看下面四种方式: 第一种方式(HTML标签属性): <input type="button" id="btn1" value="测试" onclick="alert(this.id);" /> 上面的代码是通过设置HTML标签属性为给

  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    如下所示: $(".xx").clcik(function(){····}); 本来不用js生成类,是有点击效果的一但js里写,就没有点击效果了,如下: 做如下修改即可,监听document 以上就是小编为大家带来的js中class的点击事件没有效果的解决方法全部内容了,希望大家多多支持我们~

  • 在JS中a标签加入单击事件屏蔽href跳转页面

    我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

随机推荐