在台式机和移动设备上检测点击(或触摸)的最可靠方法是什么? [英] What is the most reliable way to detect clicks (or touches) on both desktop and mobile devices?
问题描述
我正在订阅 button 元素上的 click 事件.如果您点击该按钮，这似乎在移动设备上起作用，但是如果将其按住一会儿然后释放它，则不会触发.至少这就是我最近使用Chrome的Android手机上的运行方式.
I am subscribing to the click event on a button element. That seems to work on mobile devices if you tap the button, but if you hold it in for a while and then release it, it doesn't trigger. At least that's how it works on my very recent Android phone using Chrome.
所以我想在释放按钮时触发一些操作.因此，我假设我不应该尝试 touchstart ，因为它会在首次按下按钮时触发.
So I would like to trigger something when the button is released. Thus, I'm assuming I should not go for touchstart because it triggers when the button is first pressed.
- 我需要预订多个活动吗?哪个?
- 如果我订阅了多个事件，是否需要
preventDefault()?
我找到了这篇文章，但来自2013年: https://www.html5rocks.com/en/mobile/touchandmouse/
I found this article, but it's from 2013: https://www.html5rocks.com/en/mobile/touchandmouse/
推荐答案
所以我以自己的方式尝试了一下，它似乎正常工作.它也会在单击鼠标，短按和长按时触发.由于问题是关于Chrome的，因此我在Android的Chrome 71.0.3578.99上进行了测试.
So I tried it my way, and it seems to work correctly. It triggers on mouse click, short tap and long tap as well. Since the question is about Chrome, I tested it on Chrome 71.0.3578.99 on Android.
首先，您需要在按钮上禁止用户选择，否则，将不会长按.
First, you need to suppress user selection on the button, otherwise, a long tap will not be performed.
第二，为什么每个人都非常关心释放鼠标/手指在其他地方?开始单击/点击然后移开/滑动的唯一原因是用户改变了主意，并且不想执行按钮所执行的任何操作.
Secondly, why is everybody so much concerned about releasing mouse/finger somewhere else? The only reason to start click/tap and then move/slide away is that the user has changed his mind and does not want to execute whatever the button says it executes.
最后，在我的代码中，根据需要删除并添加了事件侦听器.这仅是由于问题的结构:此代码在台式机和移动设备上均可使用.在支持鼠标和触摸屏的设备上也不会中断.
Finally, in my code, I remove and add event listeners as needed. That is only because of the question structure: this code will work on both desktop and mobile devices. It also will not break on devices supporting mouse AND touchscreen.
回答要点的问题:
- 是的，一次至少两个-
click和touchstart/touchend. - 是的，您需要它来防止短按两次触发(如果将其从我的代码中删除，您会发现在短按时它会触发
touchend然后单击事件).您可能更愿意假设，如果触发一次触摸事件，则用户没有鼠标连接到设备-在这种情况下，只需删除clickFunc()的全部内容，即可删除//您的代码:它将正常工作.
- Yes, at least two at once –
clickandtouchstart/touchend. - Yes, you need it to prevent double-triggering on short tap (if you remove it from my code, you will see that on short tap it triggers
touchendand thenclickevents). You may prefer to assume that if a touch event fired once, then the user has no mouse connected to the device - in this case simply remove the whole content ofclickFunc()apart from//Your code: it will work fine.
const button = document.getElementById("button");
function clickFunc(e){
if(e.touches){
e.preventDefault(); //Try to comment it out: double triggers on short tap
button.removeEventListener("touchend", clickFunc);
button.addEventListener("click", clickFunc);
console.log('tapped!');
}else{
console.log('clicked!');
}
//
//Your code here
}
function touchFunc(){
button.removeEventListener("click", clickFunc);
button.addEventListener("touchend", clickFunc);
}
window.onload=function(){
button.addEventListener("click", clickFunc);
button.addEventListener("touchstart", touchFunc);
}#button{
user-select: none; /*find crossbrowser solution!*/
/*For testing purposes*/
margin-top: 100px;
margin-left: 100px;
font-size: 48px;
padding: 10px 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Clicks and Touches</title>
</head>
<body>
<button id="button">Click me!</button>
</body>
</html>这篇关于在台式机和移动设备上检测点击(或触摸)的最可靠方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
