Javascript暂停事件传播

前端之家收集整理的这篇文章主要介绍了Javascript暂停事件传播前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要能够链接点击事件,并暂时暂停它们之间的事件传播.

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

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“私有”数据[1]并手动调用这些功能.

> $._ data($(element)[0],’events’).click [].handler()

解决方法

我自己有一个类似的问题,希望我的解决方案是令人满意的,因为我认识到这可能不直接适用于你的情况.但是,希望这里的原则可以帮助您找到自己的解决方案.

问题(如果我理解正确)是,如果父元素在同一时间触发相同的事件,则需要一种方法来防止子元素触发事件.而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语句执行所需的任务.或者执行一个函数,然后完成回调.

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

再次,从你的原始帖子,我认为你是一些稍微不同的东西.但也许这种方法可以帮助你.

原文链接:https://www.f2er.com/js/151756.html

猜你在找的JavaScript相关文章