停止onClick功能的发生

Stop an onClick function happening

本文关键字：功能 onClick 停止      更新时间：2023-09-26

我有一堆带有class="pageOpener"的元素，这些元素在一些页面中进行。它们附加了jQuery .on('click', ... )事件。在某个页面上，我想在继续之前验证一些输入，这样它就有了id="continuebutton"和它自己的点击监听器。我想如果我愿意的话，我可以从特定id的活动中以某种方式取消整个类的活动，但我还没能做到。我认为其中一个问题是类事件在id之前触发（它之前已附加）。

有什么方法可以让id事件先启动吗？我想按这个顺序保存我的代码，但如果唯一的方法是将id.on('click', ... )放在class.on('click', ... )之前，那么我可以这样做。

那么，阻止类事件触发的正确方法是什么？返回true？

来自.on():的文档

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

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

如果你不能依赖于你的代码以某种方式被结构化/绑定，或者如果有人后来在不知道这个需求的情况下更改了它，那么结构/序列的更改就会破坏它。我使用自定义事件解决了类似的问题。这些可以是任何顺序的，并且不具有结构依赖性。例如，你可以做：

$('.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');
});

您可以使用.off（'click'）来解除click侦听器的绑定。

官方文件

更新：

你也可以这样做。

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