解决方案1失败

Question

如何取消HTML文档中的所有点击事件？

我有一个Web应用程序可能会出现这样的情况：用户在继续之前需要接受消息。这个想法是消息出现，当用户点击其他地方消息闪烁或试图引起用户注意时

此应用程序旨在供使用IE 8及更高版本+现代浏览器的主管部门使用，这就是我希望使用jquery解决方案的原因。

此刻，我试过了：

解决方案1失败

$(document).bind('click', function(event){
            event.stopImmediatePropagation();
            $('.alertbox').effect('shake');
            return false;
        });

希望返回false或事件停止传播会停止点击，但我发现事件从Dom元素冒泡到文档，所以dom元素无论如何都会触发点击。

解决方案2失败

我在纯JS中找到了一个解决方案：

document.addEventListener('click', function(e) {
    e.stopPropagation();
}, true);

使用true作为第三个参数会将侦听器绑定到捕获阶段并在执行任何其他操作之前执行该函数，但这在IE中不起作用。

解决方案3

使用覆盖整个文档的div，这可能是其他人的解决方案，但不是在这个精确的场景中，因为错误消息（需要可点击）位于一个复杂的结构中（一切都在移动，css保持一切到位）。将此元素移动到覆盖div的顶部以使其成为唯一可点击的解决方案是一个很好的解决方案，但在这种情况下不是..

我不一定需要一个解决方案来获取IE中的泡泡前点击事件（虽然这会很好）如果我能找到一个技巧或解决方法，我可以忍受它。有什么想法吗？

工作解决方案3

我最终使用了失败的解决方案3，并添加了一个表示消息边界的假命中区域。我没有验证正确的边界，因为消息总是触及浏览器窗口的右侧。

$('#screencurtain').click(function(event)
{  
    event.stopImmediatePropagation();
    if(event.clientX > $('#messages').offset().left  &&  event.clientY > $('#messages').offset().top && event.clientY < $('#messages').offset().top + $('#messages').height())
    {
        $('#screencurtain').hide();
        $('#messages').click();
    }
    else
    {
        $('.alertbox').effect('pulsate');
    }
});

Answer 1

您可以放置一个覆盖整个屏幕的透明div

var screenWidth = $(window).width(), screenHeight = $(window).height();

$("<div>").width(screenWidth).height(screenHeight).css({ 
    zIndex : 100000
}).appendTo("body");

//Disables scrolling if exists
$("html, body").css({ 'overflow' : '100%', 'height' : '100%' });

Answer 2

可能这可以帮到你更多： -

$(function() {

$('div').click(function() {
   alert('div1'); 
});

document.addEventListener('click', function(e) { 
    alert('document');
    e.stopPropagation();
}, true);

$('div').click(function() {
   alert('div2'); 
});

});

http://jsfiddle.net/wLwMh/381/

Answer 3

我想你想看看.off（）http://api.jquery.com/off/

如果你有像这样的点击事件：

$("#selector").on('click', function(){
    //do something here
});

您可以随时删除点击处理程序：

$("#selector").off('click');

或从选择器中删除所有事件，例如单击mouseenter，mouseleave，hover等，只需将.off空白留下：

$("#selector").off();

这样您就可以从某些元素中删除点击事件，然后在需要时重新启用它们。

Answer 4

你的第一次尝试差不多了。试试这个......

$(document).on("click", "*", function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
    $('.alertbox').effect('shake');
});

当您希望能够再次点击某些内容时，真正的问题就出现了。

如何在JQuery中取消文档中的所有单击事件

解决方案1失败

解决方案2失败

解决方案3

工作解决方案3

4 个答案: