如何防止在 JQuery 中触发子事件

Question

所以我有一个按钮

<input id="expandButton" type="submit" value="Expand" class="loadWindow"/>

我附加了两个事件处理程序。

function confirmContinue() {
     return confirm("Do you want to expand window, might reload some information?");
}

$("input.loadWindow").click(function(event) {
      showProcessingWindow(event);
}

$("#expandButton").click(function(event) {
     var result = confirmContinue();
     if (!result) {
          event.preventDefault();
          event.stopPropagaton();
     }
}

我想阻止 "input.loadWindow" 在他们说取消时触发点击事件。

这就是现在正在发生的事情。单击按钮 --> 确认触发 --> 我单击取消 --> 显示处理 window 仍然触发。

我想要这样单击按钮 --> 确认触发 --> 我单击取消 --> 什么都不做。

Answer 1

试试这个：

$("#expandButton").click(function(event) {
    if(confirm('Do you want to expand window, might reload some information?')){
        // call your function here
    }else{
      return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="expandButton" type="submit" value="Expand" class="loadWindow"/>

Answer 2

看起来 event.stopImmediatePropagation() 在这种情况下可行。

$("#expandButton").click(function(event) {
     var result = confirmContinue();
     if (!result) {
          event.preventDefault();
          event.stopImmediatePropagation(); 
     }
}

Fiddle 演示- http://jsfiddle.net/w2vwn35x/1/

Answer 3

或者，使用标志。

var doShowWindow = true;
$("#expandButton").click(function(event) {
    var result = confirmContinue();
    if (!result) {
        doShowWindow = false;
    }
});

$("input.loadWindow").click(function(event) {
    if(doShowWindow){  
        alert(1);
    }
    doShowWindow = true;
});

Here's a fiddle。

如何防止在 JQuery 中触发子事件

How to prevent child event from firing in JQuery

javascript

jquery

events

chaining

preventdefault