Javascript 暂停事件传播

Question

我需要能够链接点击事件，并暂时暂停它们之间的事件传播。

因此，对于给定的元素，它会运行三个不同的点击事件，但第二个需要用户输入，因此它会在用户填写表单时暂停传播，然后继续。

clickAction2 = ->
  #Pause event propagation
  somehow.pauseEventPropegationRightHere()

  #Go and handle the dialogs, user input, JS requests
  goDoSomething().thenDoCallback( ->
     #User is now authenticated completely.
     somehow.continueEventPropegationAsIfNothingHappened()
  )

为了允许单一职责，上层/下层链接的事件不应该知道事件传播已暂停，任何事情都不应被调用两次。

不可以，这三个点击事件不能从另一个函数或任何类似的原始解决方案中按顺序调用。

这与 AngularJS 指令有关，但解决方案不需要依赖它。

有一个类似的问题，但没有一个答案令人满意:How to continue event propagation after cancelling? .

编辑:

我需要的是一种更简洁的方法来调用 e.stopImmediatePropagation()，然后从该点继续。截至目前，我最好的选择是手动输入 jQuery“私有(private)”数据 [1] 并手动调用函数。

1. $._data( $(element)[0], 'events' ).click[].handler()

Answer 1

我自己也遇到过类似的问题，希望我的解决方案令人满意，因为我意识到它可能并不直接适用于您的情况。但是，希望我在这里展示的原则可以帮助您找到自己的解决方案。

问题(如果我理解正确的话)是您需要一种方法来防止子元素在父元素基本上同时触发相同事件的情况下触发事件。而 e.stopImmediatePropagation() 防止事件冒泡，有效地阻止任何父元素触发事件。我相信解决方案是使用延迟为零毫秒的 setTimeout() 来执行所需的功能，如果在使用 setTimeout() 时触发事件再次发生, 使用 clearTimeout() 来阻止前一个事件的发生。我可以演示这种方法的最佳方式是创建父元素和子元素并观察 mouseleave 事件。

这是 JS/jQuery:

var timerActive = false;
$('#div1, #div2').mouseleave(function(e) {
    var trigger = $(this).attr('id'); // for monitoring which element triggered the event
    if (timerActive) {
        clearTimeout(announce); // stops the previous event from performing the function
    }
    window.announce = setTimeout(function() {
        alert('mouse exited'+trigger); // trigger could be use in an if/else to perform unique tasks
        timerActive = false;
    },0);
    timerActive = true;
});

这是一个 JSFiddle 演示:http://jsfiddle.net/XsLWE/

由于事件是从子元素到父元素的顺序触发的，因此清除之前的每个超时有效地等待最后一个或最顶层元素触发事件。此时您可以使用 IF/ELSE 语句来执行所需的任务。或者执行一个函数然后在完成时回调。

在demo中，效果是在div元素的左边缘和下边缘，允许每个div元素单独触发事件。但是在 div2 的顶部和右侧边缘，唯一允许触发事件的元素是 div1。

同样，从您的原始帖子来看，我认为您追求的是略有不同的东西。但也许这种方法会以某种方式帮助您。