Android 确定并绑定点击或“触摸”事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11406285/
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
Determine and bind click or "touch" event
提问by mhulse
I'm using the below code to bind "click" or "touchstart" events (using jQuery's on(eventType, function() { ... })
).
我正在使用下面的代码来绑定“click”或“touchstart”事件(使用 jQuery 的on(eventType, function() { ... })
)。
var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';
Later on:
稍后的:
$foo.on(what, function() { ... });
... which works great for iPad and "everything else", but I'm concerned that the above code has "iPad tunnel vision"...
...这对 iPad 和“其他一切”都很好,但我担心上面的代码有“iPad 隧道视野”...
My question(s):
我的问题:
Do all other devices (for example, Android tablets) have similarly named "touchstart" events? If so, how can I improve the above code so that I can account for those event types?
所有其他设备(例如,Android 平板电脑)是否都有类似命名的“touchstart”事件?如果是这样,我如何改进上面的代码以便我可以解释这些事件类型?
In other words, how can I account for a wider range of touch devices in above code (not just iPad)?
换句话说,我如何在上面的代码中考虑更广泛的触摸设备(不仅仅是 iPad)?
EDIT #1
编辑#1
What do you folks think about this:
各位大侠怎么看这个:
var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');
Note: Most of the above logic is from Modernizr here.
注意:以上逻辑大部分来自 Modernizr 这里。
The above appears to work for Firefox/iPad... I don't have much else to test on at this time.
以上似乎适用于 Firefox/iPad... 目前我没有太多其他要测试的内容。
What I like about the above is that I'm not UA sniffing. :)
我喜欢上面的是我不是 UA 嗅探。:)
Is tap
a good default for all other touch devices?
是tap
一个很好的预设,所有其他触摸屏设备?
EDIT #2
编辑#2
Some interesting information here, which links to this:
Creating Fast Buttons for Mobile Web Applications
Not a direct answer really, but gives a lot of details of the situation devs face when facing click-related events for multiple platforms and devices.
不是一个直接的答案,而是提供了许多开发人员在面对多个平台和设备的点击相关事件时所面临的情况的详细信息。
EDIT #3
编辑 #3
Some good info heretoo:
Android and iPhone touch events
Android and iPhone versions of WebKit have some touch events in common:
touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown touchmove - triggered when a touch moves. Mouse equivalent - mouseMove touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below touchcancel - bit of a mystery
Android 和 iPhone 触摸事件
Android 和 iPhone 版本的 WebKit 有一些共同的触摸事件:
touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown touchmove - triggered when a touch moves. Mouse equivalent - mouseMove touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below touchcancel - bit of a mystery
After reading that, I think I'll change the code above to this:
看完之后,我想我会把上面的代码改成这样:
var foo = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';
When I first asked my question - not having access to anything other than an iPad/iPhone - I assumed touchstart
was an iOS-specific event; it now looks like touchstart
and click
will cover most, if not all, of the bases for touch devices.
当我第一次问我的问题时——除了 iPad/iPhone 之外无法访问任何东西——我认为这touchstart
是一个特定于 iOS 的事件;它现在看起来touchstart
并且click
将涵盖触摸设备的大部分(如果不是全部)基础。
August 2014 update:
2014 年 8 月更新:
If it's of any help, I've posted some utility classes here:
如果有帮助,我在这里发布了一些实用程序类:
[no-js] [no-touch] JavaScript utilities to put in of HTML templates that will add
js
ortouch
classes for use in CSS and/or JS.
[no-js] [no-touch] 用于放入 HTML 模板的 JavaScript 实用程序,这些模板将添加
js
或touch
用于 CSS 和/或 JS 的类。
采纳答案by Cat Chen
Both iOS and Android have touch events, but Windows uses MSPointer events in IE. If you want a cross-device solution, try pointer.js or learn from it:
iOS 和 Android 都有触摸事件,但 Windows 在 IE 中使用 MSPointer 事件。如果您想要跨设备解决方案,请尝试 pointer.js 或从中学习:
回答by Konstantin Dinev
I would strongly suggest against using UA in order to determine whether you're under touch environment.
我强烈建议不要使用 UA 来确定您是否处于触摸环境中。
Use Modernizr instead: http://modernizr.com/The below code would recognize anything but windows phone 7 because the windows phone 7 does not fire the regular browser touch events. However WP8 would most probably be recognized correctly.
改用 Modernizr:http: //modernizr.com/下面的代码可以识别除 windows phone 7 之外的任何东西,因为 windows phone 7 不会触发常规浏览器触摸事件。但是 WP8 很可能会被正确识别。
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
回答by Sky Yip
This may work for you:
这可能对你有用:
var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);