javascript - 需要防止鼠标悬停在jquery中单击

Question

嗨有以下代码：

$('img').on("mouseenter",function(){
        //show overlay
    });

$("#overlay").on("click",function(event) {
    event.preventDefault();
        //hide overlay  
})

当我单击覆盖时，它应该关闭。但是当我碰巧在图像上时它不会关闭。我同时收到 mouseclick 和 mouseenter 事件如何防止这种情况发生？

我正在使用 jquery 1.10.2

Answer 1

当您单击覆盖时删除mouseenter事件。

$("#overlay").on("click",function(event) {
   $('img').off("mouseenter");   // Remove the mouseenter event handler
    event.preventDefault();
        //hide overlay  
});

建议：更好地使用.hover而不是mouseenter

$('img').on("hover",function(){
        //show overlay
    });

$("#overlay").on("click",function(event) {
    $('img').off('hover');
    event.preventDefault();
        //hide overlay  
})

Answer 2

当您在图像上时，它首先进入click事件，然后是mouseenter事件。因此，单击事件隐藏，然后 mouseenter 再次显示。所以，当你在 img 上时，你不能隐藏布局。但是，如果您在短时间内禁用 img 的 mouseenter 事件，则问题将在 Chrome 和 FF 中得到解决。

在jsfiddle中，将您的 js 函数更改为：

$(function() {
    var docHeight = $(document).height();      

    $("body").append("<div id='overlay'></div>");

    $("#overlay")
    .height(docHeight)
    .css({
        'opacity' : 0.4,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background-color': 'black',
        'width': '100%',
        'background-repeat':'no-repeat',
        'background-attachment':'fixed',
        'background-position':'center',
        'z-index': 5000
    }).on("click",function(e) {   
               hideOverlay();  
               unbindImgMouseEnter();
               setTimeout(bindImgMouseEnter, 100); 
        }).hide();       

    bindImgMouseEnter();   
});

function bindImgMouseEnter(){
    $('img').on("mouseenter", showOverlay);
}

function unbindImgMouseEnter(){
    $('img').off("mouseenter");
}

function showOverlay(){   
    $("#overlay").show(); 

    console.log('showed');
}

function hideOverlay(){
    $("#overlay").hide(); 

    console.log('hidden');
}