[英]How to distinguish click and touch events in Internet Explorer 10 / Windows Phone 8
I'm working on a project with a hover navigation. 我正在开发一个带有悬停导航的项目。
Due to the nature of touch enabled devices, hover isn't really supported on them. 由于启用触摸的设备的性质,它们实际上不支持悬停。 For iOS and android I managed to disable all hover effects and simulate them through the "touchstart" event, which sets the right css properties.
对于iOS和Android,我设法禁用所有悬停效果并通过“touchstart”事件模拟它们,该事件设置了正确的css属性。 This works like a charm.
这就像一个魅力。 If it is a "touchstart" event, it is a mobile device, otherwise probably a desktop.
如果它是“touchstart”事件,则它是移动设备,否则可能是桌面。
Unfortunately Internet Explorer implements its own events, namely "MSPointerDown" and the like. 不幸的是,Internet Explorer实现了自己的事件,即“MSPointerDown”等。
My problem is, that both IE versions (newest mobile and desktop) fire a "click" event, as well as two "MSPointerDown" events, one with the pointerType "touch", one with pointerType "mouse". 我的问题是,两个IE版本(最新的移动和桌面)都会触发“click”事件,以及两个“MSPointerDown”事件,一个是pointerType“touch”,另一个是pointerType“mouse”。 I really can't wrap my head around how to find out, if the action was a real touch event or caused by the mouse, since both are triggered.
如果动作是真正的触摸事件或由鼠标引起的话,我真的无法理解如何找出,因为两者都被触发了。 I wanted to avoid a solution based on media-queries since large touchscreens are getting more and more popular.
我想避免基于媒体查询的解决方案,因为大型触摸屏越来越受欢迎。
I ran into a similar issue recently. 我最近遇到了类似的问题。 I ended up adding the hover state with JavaScript instead of the :hover pseudo-class and then binding either a touchstart or a click event to reveal the sub menu if the main menu item doesn't have a the hover class .
我最后使用JavaScript而不是:hover伪类添加悬停状态,然后绑定touchstart或click事件以显示子菜单,如果主菜单项没有hover类 。
$(document).ready(function(){
var $menuItem = $( '.menu__item' );
$menuItem.on( 'mouseenter', function(){
$(this).addClass( 'hover' );
});
$menuItem.on( 'mouseleave', function(){
$(this).removeClass( 'hover' );
});
// For touch devices
$menuItem.on( 'click', function(e) {
if ( !$(this).hasClass( 'hover' ) ) {
$(this).addClass('hover');
}
});
});
Check this quick codepen that I've created. 检查我创建的这个快速编解码器。
http://codepen.io/aspjg/pen/zKzEQV http://codepen.io/aspjg/pen/zKzEQV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.