JQuery取消了其他活动

时间:2017-01-06 19:14:21

标签: javascript jquery

我的代码中有一个按钮,我需要停止其他事件点击此按钮,但我需要其他事件仍然绑定。

代码:

var cancel = true;

$("#btn").on("click", function(ev) { 
    console.log("FIRST CLICK");
});

$("#btn").on("click", function(ev) { 
    console.log("SECOND CLICK");
    if(cancel) {
       --- cancel first click---
    }
});

用法:

cancel = true;
$("#btn").click();
cancel = false;
$("#btn").click();

预期产出:

SECOND CLICK

FIRST CLICK
SECOND CLICK

我已经尝试了

ev.stopImmediatePropagation(); 
ev.stopPropagation();
ev.preventDefault(); 
return false;

但是任何这项工作,我如何阻止所有其他点击事件绑定而不解除绑定?

2 个答案:

答案 0 :(得分:3)

.off jquery方法是我认为的方式

$("#btn").on("click", function(ev) { 
console.log("FIRST CLICK");
});

$("#btn").on("mousedown", function(ev) { 
console.log("SECOND CLICK");
--- cancel first click---
$("#btn").off('click');
$("#btn").text("Anything you want to do");
// then if you need to rebind you can do 
$("#btn").on("click", function(ev) { 
console.log("FIRST CLICK");
});
});

所以你取消绑定它运行代码重新绑定它。但我认为你的问题的答案是`$(function(){

var cancel= 'true';
$("#btn").on("click",function(e){
             if(cancel == 'true'){
    cancel = 'false';
}else{
    cancel = 'true';
}
             });

});

对于缩进很抱歉,但这会将取消切换为开/关 我认为那是预期的目标。当您单击按钮时,它会将false切换为true或true切换为false。

答案 1 :(得分:1)

一种解决方案是仔细考虑事件绑定的订单。通过首先绑定更重要的点击,我们可以stopImmediatePropagation()取消任何后续绑定。

$("#btn").on("click", function(e) {
  e.stopImmediatePropagation();
  console.log("Reversed second click");
});
$("#btn").on("click", function(e) {
  console.log("Reversed first click");
});



$("#btn").on("click", function(e) {
  console.log("First click");
});
$("#btn").on("click", function(e) {
  e.stopImmediatePropagation();
  console.log("Second click");
});

$("#btn2").on("click", function(e) {
  e.stopImmediatePropagation();
  console.log("Reversed second click");
});
$("#btn2").on("click", function(e) {
  console.log("Reversed first click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
  Something
</button>
<button id="btn2">
  Reversed Order
</button>
&#13;
&#13;
&#13;