jQuery 点击后jQuery阻止其他事件

jQuery prevent other events after a click

提问by Russell

I am trying to prevent multiple clicks on links and items, which is causing problems.

我试图防止多次点击链接和项目，这会导致问题。

I am using jQuery to bind click events to buttons (jQuery UI) and image links (<a><img /></a>).

我正在使用 jQuery 将点击事件绑定到按钮（jQuery UI）和图像链接（<a><img /></a>）。

Is there a way to do-once-for-all prevent other events from firing after a click occurs?

有没有办法一劳永逸地防止其他事件在点击发生后触发？

Or do I have to maintain a global variable called _isProcessing and set it to true for each event handler?

或者我是否必须维护一个名为 _isProcessing 的全局变量并将其设置为 true 为每个事件处理程序？

Thanks

谢谢

Edit: (clarification) Thanks for your answers, my problem isn't preventing the bubbling of the event, but preventing multiple concurrent clicks.

编辑：（澄清）感谢您的回答，我的问题不是防止事件冒泡，而是防止多次并发点击。

回答by user113716

There are various ways to prevent concurrent clicks from running the code.

有多种方法可以防止并发点击运行代码。

One way is to unbind('click')on the element, then .bind()it again when you're ready.

一种方法是unbind('click')在元素上，然后.bind()在您准备好时再次使用。

I'd rather use some sort of flag. It could be a variable, but I'd rather assign a class to the element, like .processing, and remove it when done. So you would have the handler check for the existence of that class to determine of the code should run.

我宁愿使用某种标志。它可能是一个变量，但我宁愿为元素分配一个类，例如.processing，并在完成后将其删除。因此，您可以让处理程序检查该类是否存在，以确定应该运行的代码。

$('someElement').click(function() {
    var $th = $(this);
    if($th.hasClass('processing'))
          return;
    $th.addClass('processing');
    // normal code to run
    // then when done remove the class
    $th.removeClass('processing');
});

Another option is to use the elements .data()to set a similar flag, like $(this).data('processing', true);Then set it to false when done.

另一种选择是使用元素.data()设置一个类似的标志，比如$(this).data('processing', true);然后在完成后将其设置为 false。

回答by TehOne

There is event.preventDefault, event.stopPropagationand return false as already stated.

如前所述，有event.preventDefault、event.stopPropagation和 return false 。

$("a").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

回答by hunter

did you check out preventDefault?

你检查了 preventDefault 吗？

$("a").click(function(e) {
    e.preventDefault();
}

you could also try stopImmediatePropagation()or stopPropagation()

你也可以尝试stopImmediatePropagation()或stopPropagation()

---

---

You could also look into the one()event.

您也可以查看one()事件。

Attach a handler to an event for the elements. The handler is executed at most once per element.

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

回答by Gintautas Miliauskas

Return falsefrom your event handlers, or call ev.stopPropagation()in every handler.

false从您的事件处理程序返回，或调用ev.stopPropagation()每个处理程序。

回答by elo80ka

You've got a couple of options:

你有几个选择：

1. If your buttons/links will reload the page, you can simply unbind the click event handler:

   $('input:submit').click(fumction() {
       $(this).unbind('click');
       // Handle event here 
   })
   

2. You can disable the buttons, and re-enable them once you're done (I think this should also work with <input type="image">):

   $('input:submit').click(function() {
       $(this).attr('disabled', 'disabled');
       // It also helps to let the user know what's going on:
       $(this).val('Processing...');
       // Handle event here 
       $(this).removeAttr('disabled');
   })
   

   I don't think this works on links though.

1. 如果您的按钮/链接将重新加载页面，您可以简单地解除单击事件处理程序的绑定：

   $('input:submit').click(fumction() {
       $(this).unbind('click');
       // Handle event here 
   })
   

2. 您可以禁用按钮，并在完成后重新启用它们（我认为这也适用于<input type="image">）：

   $('input:submit').click(function() {
       $(this).attr('disabled', 'disabled');
       // It also helps to let the user know what's going on:
       $(this).val('Processing...');
       // Handle event here 
       $(this).removeAttr('disabled');
   })
   

   不过，我认为这不适用于链接。

回答by Arnold Zokas

Another way would be to use event.stopPropagation()and event.isPropagationStopped()for signalling:

另一种方法是使用event.stopPropagation()和event.isPropagationStopped()来发送信号：

Example:

例子：

$(button).click(function(e){
    if(e.isPropagationStopped())
        return; // propagation was stopped, so stop further execution

    // if you got this far - this event handler was called first
    // custom logic goes here

    // stop event propagation to signal other handlers
    e.stopPropagation();

    // if you need, call e.preventDefault() to prevent default behaviour
});

Repeat same logic for other event handlers.

对其他事件处理程序重复相同的逻辑。