10

我有一个悬停功能，如果它是一个触摸设备，我希望不会发生悬停事件。问题是当您使用触摸设备点击链接时，它会在点击事件之前执行悬停事件，因此您必须点击它两次才能使其工作。

这是悬停功能：

$("#close").hover( 
    function () { 
        $("#close_2").css({
            display: "none"
        });
        $("#close_1").css({
            display: "block"
        });
    }, 
    function () {
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "block"
        });;
    }
);

然后我将其设置为点击功能：

$('#close').click(function() {
    var id = $(this).attr('id');
    $('#full_image').animate({
        height: 0
    }, 300, function() {
        $('#full_image img').attr('src','#');
    });
    $("#close_1").css({
        display: "none"
    });
    $("#close_2").css({
        display: "none"
    });
    $("#close").css({
        display: "none"
    });
});
4

5 回答 5

15

使 .hover() 方法更明确，并将其与 .on() 结合使用：

var $close1 = $('#close_1'),
    $close2 = $('#close_2');

$('#close').on({
    mouseenter: function(){
        $close2.css({display:'none'});
        $close1.css({display:'block'});
    },
    mouseleave: function(){
        $close1.css({display:'none'});
        $close2.css({display:'block'});
    }
});

然后将它与 .off() 结合起来。

$('#close').on('touchstart',function(){
    $(this).off('mouseenter,mouseleave');
});

如果您希望事件在点击触摸设备时触发，但在桌面设备上悬停时触发，则将函数作为您在这些操作中分别调用的单独函数。

编辑

自从我回答这个问题以来已经有一段时间了，这是一个更好的方法：

$(function(){
    var isTouchDevice = ('ontouchstart' in window || 'onmsgesturechange' in window),
        $close = $('#close'),
        $close1 = $('#close_1'),
        $close2 = $('#close_2');

    if(!isTouchDevice){
        $close.on({
            mouseenter: function(){
                $close2.hide();
                $close1.show();
            },
            mouseleave: function(){
                $close1.hide();
                $close2.show();
            }
        });
    }

    $close.on('click',function(){
        $('#full_image').animate({height:0},300,function(){
            $(this).find('img').attr('src','#');
        });

        $close.hide();
        $close1.hide();
        $close2.hide();
    });
});

这不需要在每次触摸时触发“防止悬停”事件，基本上在页面加载时设置功能，同时不影响点击事件。

于 2013-01-17T22:04:05.280 回答
5

我认为一个明确的方法是：

  1. 检测浏览器是否支持触摸事件
  2. 相应地添加悬停事件处理程序

如果您已经在使用 Modernizr 之类的东西：

if(!Modernizr.touch){
    // only if the browser doesn't support touch events,
    // add the hover handler here.
}
//add the click handler here, as you want it bound no matter what

请参阅使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？以及使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？用于检测触摸功能的其他选项。

于 2013-01-17T22:18:05.997 回答
3

在移动端，在touchstart事件中调用preventDefault可防止mouseover、mouseenter、mousedown和附属事件。详情：https ://patrickhlauke.github.io/touch/tests/results/

    $('#close').on('touchstart',function(e){
        console.log('touchstart');
        e.preventDefault();
        //Do touch stuff
    });
于 2016-05-10T06:00:24.243 回答
2

由于 Windows 8 和超极本，我希望看到很多设备同时支持触摸和指针事件。因此，我避免完全禁用悬停事件，因为它可能会破坏使用鼠标启用触摸的用户的站点。

为了解决这个问题，我最终使用了两个不同的类来显示菜单.hover和.touch，以及悬停和点击的单独事件。

我正在使用jquery.finger来捕获点击事件，尽管任何插件都应该可以工作，这只是最小的一个。

HTML 将类似于：

<li>
    <a>Some Link</a>
    <div>Some Content</div>
</li>

CSS 将类似于：

li div {display:none;}
li.hover div, li.touch div {display:block;}

以及使用 JQuery 的 Javascript：

// Caching whatever elements I'm using for the navigation
a = $("a");
li = $("li");

// Set hover events
li.hover(

    // Both hover in and out fire whenever the user taps, aggravating!
    function(e) {
        // Close unused menus
        li.not(this).removeClass("hover").removeClass("touch");

        // Show this menu
        $(this).addClass( "hover" );
    }, function(e) {
        // Only closes if the menu doesn't have .touch, hell yeah!
        li.removeClass("hover");
    }

);

// Set the tap event
a.on('tap',function(e,data){
    e.stopPropagation();
    var thisParent = $(this.parentNode);

    // Close unused menus
    li.not(thisParent).removeClass("touch");

    // Toggle the current menu
    thisParent.toggleClass("touch");

    // The menu is open, so we don't need this class anymore
    li.removeClass("hover");
});

// Prevent the list items when being tapped from closing the drop down
li.on('tap',function(e){e.stopPropagation();});

// Close drop downs when tapping outside the menus
$(document).on('tap',function(e){
   li.removeClass("touch");
});

这里重要的一点是我如何根据事件添加单独的.hover或.touch类，以及删除未使用的类。顺序很重要，因此菜单不会闪烁。

于 2013-11-22T20:47:00.160 回答
-5

最终使用触摸检测：

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

if(agentID) { 
    $('#close').click(function() {
        var id = $(this).attr('id');
        $('#full_image').animate({
            height: 0
        }, 300, function() {
            $('#full_image img').attr('src','#');
        });
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "none"
        });
        $("#close").css({
            display: "none"
        });
    });
}
else {
    $('#close').hover(
        function() {
            $("#close_2").css({
                display: "none"
            });
            $("#close_1").css({
                display: "block"
            });
        }, function() {
            $("#close_1").css({
                display: "none"
            });
            $("#close_2").css({
                display: "block"
            });
        }
    ); 
    $('#close').click(function() {
        var id = $(this).attr('id');
        $('#full_image').animate({
            height: 0
        }, 300, function() {
            $('#full_image img').attr('src','#');
        });
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "none"
        });
        $("#close").css({
            display: "none"
        });
    });
}
于 2013-01-17T22:22:33.423 回答