jQuery:在所有点击事件发生之前捕获它们?

发布于 2024-11-10 18:19:15 字数 801 浏览 6 评论 0原文

在我的页面上,我有很多响应点击事件的各种元素。 有时我需要根据某些全局标志阻止所有点击。 有没有办法可以在集中位置进行此检查?

现在,在每个事件中,我都会检查标志,例如:

var canClick = false; // Global flag

// Sample click event:
$("#someDiv").click(function(){
  if(!canClick) return;

  // Some stuff ...
});

我想做的是有一个元素在任何其他元素之前捕获所有点击事件。

我尝试在文档上执行此操作,但这些事件仅在其他单击事件之后发生。

示例:

$("#someDiv").click(function(){ console.log("someDiv click"); });

$(document).click(function(){ console.log("Document click"); });

// When I click on the someDiv element it prints:
> someDiv click
> Document click

我还尝试在所有内容之上放置一个全屏 div,并使用它来捕获事件,但问题是没有任何点击都通过这个全屏 div 传播。另外,我不想依赖创建额外的元素来捕获点击,因为这感觉有点hacky。

我可以重写 jQuery 点击函数,这样我就可以把我的小支票放在那里吗?

我在这里缺少什么明显的东西吗?

感谢您的任何帮助。

On my page I have a lot of various elements which respond to click events.
There are times when I need to block all clicks based on some global flag.
Is there a way I can make this check in a centralized location?

Right now in each event I check for the flag, for example:

var canClick = false; // Global flag

// Sample click event:
$("#someDiv").click(function(){
  if(!canClick) return;

  // Some stuff ...
});

What I'd like to do is have one element which traps all click events before any other elements.

I tried doing it on document but these events only occur after the other click events.

Example:

$("#someDiv").click(function(){ console.log("someDiv click"); });

$(document).click(function(){ console.log("Document click"); });

// When I click on the someDiv element it prints:
> someDiv click
> Document click

I also tried putting a full screen div on top of everything and using this to trap events but the problem there was that none of the clicks were being propagated through this full screen div. Also I don't want to rely on creating extra elements to trap clicks as it feels a little hacky.

Could I maybe overwrite the jQuery click function so that I can put my little check in there?

Is there something obvious I'm missing here?

Thanks for any help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

别忘他 2024-11-17 18:19:15

是的,使用 .addEventListener() 并将第三个选项设置为 true。这会将侦听器绑定到捕获阶段并在执行其他任何操作之前执行该函数。

下面是一个示例,这将阻止所有点击处理程序执行:

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

在此处查看其实际情况:

http://jsfiddle.net /wLwMh/1/

Yes, use .addEventListener() and set the 3rd option to true. This will bind the listener to the capture phase and execute the function before anything else gets executed.

Here's an example where this will stop all click handlers from executing:

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

See it in action here:

http://jsfiddle.net/wLwMh/1/

凉风有信 2024-11-17 18:19:15

后绑定侦听器

$("#someDiv").bind('awesomeEvent', function() {
    //do stuff here
}

$(*).click(function() {
    if(canClick) {
        $(this).trigger('awesomeEvent');
    }
}

您可以捕获所有点击事件,然后触发一个自定义事件,在检查编辑
我应该提到,从性能的角度来看,使用 $(*) 选择器并不是一个好主意。你真的应该尝试以某种方式缩小范围。

You could capture all the click events then trigger a custom event where you have your listeners bound after your check

$("#someDiv").bind('awesomeEvent', function() {
    //do stuff here
}

$(*).click(function() {
    if(canClick) {
        $(this).trigger('awesomeEvent');
    }
}

EDIT
I should mention that using the $(*) selector is not a good idea from a performance standpoint. You should really try and narrow the scope somehow.

自找没趣 2024-11-17 18:19:15

使用注入 Javascript :

view.loadUrl(
                    "javascript:(function() {"


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

                            + "})()"
            );

Using Inject Javascript :

view.loadUrl(
                    "javascript:(function() {"


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

                            + "})()"
            );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文