Question

我有一堆class="pageOpener"的元素在某些页面上进展。他们附加了jQuery .on('click', ... )个事件。在某个页面上，我想在继续之前验证一些输入，因此它有id="continuebutton"和它自己的点击监听器。如果我愿意，我想我能以某种方式取消特定ID范围内的全班活动，但我还没有能够管理它。我认为其中一个问题是类事件在id之前触发（它之前是附加的）。

有没有办法让id事件先开火？我想保持我的代码按此顺序排列，但如果唯一的方法是将id.on('click', ... )放在class.on('click', ... )之前，那么我就可以做到。

然后停止类事件触发的正确方法是什么？是真的吗？

Answer 1

来自documentation for .on()：

然后，当前元素上附加的任何其他处理程序都将运行。为防止这种情况，请致电event.stopImmediatePropagation()。（绑定到元素的事件处理程序的调用顺序与它们绑定的顺序相同。）

您需要首先绑定基于id的click事件处理程序（因此它首先运行），并在其函数内部调用event.stopImmediatePropagation()以停止另一个基于类的事件{{1正在执行的事件处理程序。

Answer 2

如果您不能依赖于以某种方式构建/绑定您的代码，或者如果有人在以后不知道此要求而更改它，则结构/序列更改将会破坏它。我使用自定义事件解决了类似的问题。这些可以是任何顺序，并且不具有结构依赖性。例如，您可以这样做：

$('.pageOpener').on('click', function(){
  // check the ID:
  if ($(this).prop('id') === 'continuebutton'){
     $('#continuebutton').trigger('myCustom');
  }
  else {
     $(this).trigger('myPageOpenerClick');
  }
});
$('.pageOpener').on('myPageOpenerClick', function(){
  // do that page opener stuff here
});

$('#continuebutton').on('myCustom', function(){
  // do that page custom stuff here
  alert('Howdy, handling id stuff');
  //trigger the other event now that stuff above is done:
  $(this).trigger('myPageOpenerClick');
});

Answer 3

您可以使用.off（'click'）取消绑定点击监听器。

Official docs

更新

您也可以这样做。

$(".your_class").on("click", function(event){
  if($(this).attr("id")=="continuebutton"){
    return false;
  }else{
    //Continue handling the click event
  }

});

停止发生onClick功能

3 个答案: