平板电脑和触摸屏手机的 jquery 点击事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17068877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 18:22:47  来源:igfitidea点击:

jquery click event for tablets and touch screen phones

jqueryclicktabletsmartphone

提问by Amy Neville

Ok, I am fairly new to web development for mobile/tablet platforms. I am pretty confident though in developing for a browser environment.

好的,我对移动/平板电脑平台的 Web 开发还很陌生。我对为浏览器环境进行开发非常有信心。

My problem is that I don't own any tablet (I am poor so have to fly blind) so it's hard for me to do testing. I'm also quite anxious about the click events not working properly.

我的问题是我没有任何平板电脑(我很穷,所以不得不盲目飞行)所以我很难进行测试。我也很担心点击事件不能正常工作。

How can I ensure that click and mousedown jquery events work on tablets/smartphones correctly?

如何确保 click 和 mousedown jquery 事件在平板电脑/智能手机上正常工作?

Is there any consensus on best practice for click events and tablets/smartphones?

关于点击事件和平板电脑/智能手机的最佳实践是否有任何共识?

Note: I am not developing a mobile only site - the site transforms shape for mobile.

注意:我不是在开发仅限移动设备的站点 - 该站点会为移动设备转换形状。

回答by cfs

Mobile browsers will still respond to click events, though they will introduce a delay (usually around 300 ms). If you want a more responsive experience, you can try to detect if you are on a mobile platform and use either touchstartor touchendevents. I find touchendis usually a better experience, mainly because the user's hand is still in the way when touchstartfires.

移动浏览器仍会响应点击事件,但它们会引入延迟(通常约为 300 毫秒)。如果您想要更灵敏的体验,您可以尝试检测您是否在移动平台上并使用touchstarttouchend事件。我发现touchend通常是更好的体验,主要是因为用户的手在touchstart开火时仍然挡在路上。

Something like this:

像这样的东西:

$(element).on(isMobile ? 'touchend' : 'click', function(e) {...});

$(element).on(isMobile ? 'touchend' : 'click', function(e) {...});

Or you can use hammer.js, which will work for both desktop and mobile.

或者您可以使用hammer.js,它适用于桌面和移动设备。

As for testing, you can read through the answers to this Stackoverflow question: Simulating touch events on a PC browser.

至于测试,你可以通读这个 Stackoverflow 问题的答案:在 PC 浏览器上模拟触摸事件