根据条件调用注册的事件回调函数

Question

假设我有一个像

这样的简单按钮

<button id='test'>ClickME</button>

通过一些脚本（别人提供的）在上面注册了一个点击事件，像这样

$('#test').on('click', function(){
      alert('click 1');  //Some lines of code
});

稍后在页面加载时，我运行我的脚本放在它上面，我想在其中对同一个按钮单击执行一些操作。在脚本中，我写了类似

$('#test').on('click', function(){
      alert('click 2');   //Some lines of code
});

在这种情况下，当我单击按钮时，我收到了两个可以理解的警报。

我想要实现的是，首先 "click 2" 应该被提醒，并且在相同的代码中，基于某些条件，我可能会也可能不会调用之前注册的函数，即 "click 1" alert .我不知道我们是否可以实现这样的事情，如果可以，我如何才能阻止执行已注册的事件。

感谢任何帮助。

Answer 1

两个处理程序都将运行，jQuery 事件模型允许在一个元素上使用多个处理程序，因此较新的处理程序不会覆盖较旧的处理程序。

The handlers will execute in the order in which they were bound.

我建议你像这样合并两个代码块：

$('#test').on('click', function(){
      alert('click 2');   //Some lines of code
   if (some condition){
    alert('click 1');  //Some lines of code
   }  

});

Answer 2

您可以从一个元素中取消绑定所有以前的事件处理程序。在此之前，您可以存储它们的内容。这允许您编写如下代码：

// not your code
$('#test').on('click', function(){
      alert('click 1');  //Some lines of code
});

// your code
var prevHandler = $._data($("#test")[0], "events").click[0].handler;

$('#test').off('click');

$('#test').on('click', function(){
      alert('click 2');   //Some lines of code
      if (Math.random() > 0.5)
          prevHandler();
});

jsfiddle: https://jsfiddle.net/ugefofLs/

Answer 3

如果您不知道其他事件是否已被注册，并且仍想确保只有您的事件触发，您可以使用 jQuerys event.stopImmediatePropagation() 只允许您的事件运行.

event.stopImmediatePropagation()

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.Keeps the rest of the handlers from

查看下面的代码和片段

//Change this to false to let both registrered events run
var preventOtherClickEvents = true;

var onClick = function(event) {
  if (preventOtherClickEvents) {
    event.stopImmediatePropagation();
  }

  alert('First event handler');
};

var onClickSecond = function() {
  alert('Second event handler');
};

$('#button').on('click', onClick);

$('#button').on('click', onClickSecond);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />

根据条件调用注册的事件回调函数

Calling registered event callback function based on conditions

javascript

jquery

javascript-events