Javascript mouseover事件和mobile上相同元素上的click事件冲突

我正在使用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();
});

---

如果您能够使用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();
});

因此，如果它的手机和mouseover和mouseout启动，那么它只会在执行任何操作之前返回，这就是你想要的方式

可以在

找到Modernizer，我最后使用了这个：

var isTouchDevice = 'ontouchstart' in document.documentElement;

---

我有一个变量，可以检查触摸屏的功能，而不需要添加Modernizer。

您应该检测这是否是一个移动浏览器，并只绑定单击事件，移动设备上的鼠标悬停是非常无用的