Question

我使用angular.js来构建我的网站，我有一个MOUSEOVER事件应该显示导航栏的元素，在移动设备上，点击该元素，应该显示导航栏+菜单。

这两个事件发生冲突。

有什么想法吗？

//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
    angular.element('#navbar').stop().fadeIn();
    btnState.setPosition(1);
    // navbar fade out by mouse out of button
    angular.element('.menu_hamburger').one('mouseout', function() {
        btnState.setPosition(0);
    });
});

//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
    angular.element('#navbar').finish().slideDown();
    btnState.openMenu();
});

Answer 1

如果您能够使用Modernizr（用于检查HTML5内容的js库），那么它提供了检查客户端是否可移动的最佳方法。你也可以在纯粹的javascript中做到这一点，但经过无数次的尝试，我放弃了它：

通过使用Modernizr.touch，您可以查看设备是否具有触控功能。触摸屏对于手机和平板电脑而言是独一无二的，但不幸的是还有配备触摸屏的笔记本电脑（感谢上帝并不是很多）。

那么代码就像这样：

//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
    if(Modernizr.touch) {
        return;
    }
    angular.element('#navbar').stop().fadeIn();
    btnState.setPosition(1);
    // navbar fade out by mouse out of button
    angular.element('.menu_hamburger').one('mouseout', function() {
        if(Modernizr.touch) {
            return;
        }
        btnState.setPosition(0);
    });
});

//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
    angular.element('#navbar').finish().slideDown();
    btnState.openMenu();
});

因此，如果它的移动设备和鼠标悬停和鼠标输出都会触发，那么它只会在执行任何操作之前返回 - 就像你想要的那样。

Modernizr可以在http://www.modernizr.com/

找到

Answer 2

我终于使用了这个：

var isTouchDevice = 'ontouchstart' in document.documentElement;

我有一个变量来检查触摸屏的能力，而不添加Modernizr。

mouseover事件和click事件在移动设备上的相同元素冲突

2 个答案: