3

如何取消 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');
    }
});
4

4 回答 4

2

您可以放置​​一个覆盖整个屏幕的透明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%' });
于 2013-09-03T15:59:25.610 回答
0

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

$(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/

于 2013-09-03T15:58:09.863 回答
0

我想你想看看 .off() http://api.jquery.com/off/

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

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

您可以随时执行此操作并删除点击处理程序：

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

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

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

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

于 2013-09-03T16:00:03.943 回答
0

你的第一次尝试几乎就成功了。尝试这个...

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

真正的问题出现在您希望能够再次单击事物时。

于 2013-09-03T16:10:42.407 回答