stopPropagation和startPropagation

时间:2013-07-17 09:04:58

标签: javascript jquery stoppropagation

我想制作一个额外的点击处理程序(客户端页面,无法修改他的js / html),它应该在我的脚本中这样工作:

1)event.stopPropagation(暂停客户端点击传播)
2)我的功能(做我的功能,当一切都完成后再做) 3)event.startPropagation(继续标准客户行动)

现在,第一和第二项工作。第三是问题 我知道event.startPropagation不存在,但我想要那样的东西。 任何提示?

3 个答案:

答案 0 :(得分:10)

您可以在父节点f.ex(jQuery)上重新触发相同的事件对象。您需要先复制事件对象并将其传递给触发器,以便在气泡中捕获相同的事件属性(f.ex e.pageX):

var copy = $.extend(true, {}, e);
setTimeout(function() {
    $(copy.target.parentNode).trigger(copy);
},500);
e.stopPropagation();

演示:http://jsfiddle.net/GKkth/

修改

根据您的评论,我认为您正在寻找类似的内容:

$.fn.bindFirst = function(type, handler) {
    return this.each(function() {
        var elm = this;
        var evs = $._data(this).events;
        if ( type in evs ) {
            var handlers = evs[type].map(function(ev) {
                return ev.handler;
            });
            $(elm).unbind(type).on(type, function(e) {
                handler.call(elm, e, function() {
                    handlers.forEach(function(fn) {
                        fn.call(elm);
                    });
                });
            });
        }
    });
};

这个原型允许你绑定一个“高级处理程序”,它包含一个next函数,可以在你想要的时候执行所有以前的处理程序。 使用

$('button').click(function() {
    console.log('first');
}).click(function() {
    console.log('second');
}).bindFirst('click', function(e, next) {
    console.log('do something first');
    setTimeout(next, 1000); // holds the other handlers for 1sec
});

DEMO:http://jsfiddle.net/BGuU3/1/

答案 1 :(得分:4)

首先不要停止传播。

测试my function是否符合您的要求,然后决定是否要停止传播。

答案 2 :(得分:0)

如果要分别启用/禁用click事件,请添加和删除单击处理程序。因为event.stopPropagation()会阻止事件传播到dom树上。

<强>更新

如果您使用的是jQuery,请使用.trigger()函数。

http://api.jquery.com/trigger/