谈谈ontouchstart、ontouchend、onclick区别和坑

prtyaa 2023-12-26 17:00:59  52697

分类专栏：资讯

今天来说一下他们三个之间的区别和坑点

先来了解一下他们的概念

touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchend：当手指从屏幕上离开的时候触发。
click：点击事件

我们用一个例子来说今天的这个东西

<body>
	<div style="width: 100px;height: 100px;background: #0086B3;"></div>
</body>
<script type="text/javascript">
	var btn = document.querySelector('div');
	btn.addEventListener('click',()=>{
		console.log('click')
	})
	btn.addEventListener('touchstart',()=>{
		console.log('touchstart')
	})
	btn.addEventListener('touchend',()=>{
		console.log('touchend')
	})
</script>

我们先看一下ontouchstart、ontouchend、onclick这三个方法的执行顺序。

可以看到它们的执行顺序是ontouchstart > ontouchend > onclick

除了执行顺序不同以外，还有一个非常大的区别那就是onclick只在你快速点击并放开才会被执行，如果你点击一个区域，很迟才放开，那么onclick是不会执行的，如下图就是我点击div两秒以后松开的结果。

从上图可以看到它并没有输出click，其实我们移动端滑动时，也是不会触发click事件的，这也是ontouchstart、ontouchend和onclick最大区别。

接下来说说他们的坑点

比如说有这么一个需求，当点击a标签里的某个元素时通过location.href跳转，但当我去测试时，发现一个问题，我上下滑动的时候，结果直接跳转了地址。

导致滑动跳地址的原因就出现在，我是给那个元素添加的ontouchend事件，而ontouchend事件在你滑动结束后是会被触发的，也许你会想，用onclick不就行了，我何尝不想用onclick，没用onclick也是有原因的，它有点透问题，比如下面这段代码

<body>
	<a href="//www.taobao.com">
	    <div>无效</div>
	    <p id="baidu">跳到baidu</p>
	</a>
</body>

<script type="text/javascript">
	var baidu = document.querySelector("#baidu");
	baidu.addEventListener("click",function(event){
	    location.href = "//www.baidu.com";
	});
</script>

可以看到点百度并没有跳转过去。

它并不是因为事件冒泡导致的，网上说是因为click延时触发导致的，可能是这样的，因为click的延时，导致事件在没触发之前，就已经传递给了a标签，至于为什么被传递的这个事件先被执行，就不得而知了。

解决这个问题倒也简单，阻止浏览器默认事件就可以了，代码如下

baidu.addEventListener("click",function(event){
	    event.preventDefault();
	    location.href = "//www.baidu.com";
	});

其实不只是click有这个问题，ontouchend也会有同样的问题。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30888

赞同 0

评论 0 条

谈谈ontouchstart、ontouchend、onclick区别和坑

相关文章

关注我们