Question

我试图仅针对特定事件处理程序停止事件传播，同时允许同一事件上的其他人传播，这是一个示例：

function Control(parent) {
    this.Parent = $(parent);
    this.Parent.append('<div class="test"></div>');
    this.Test = $('.test', this.Parent).last();
    this.Test.bind('mousedown', this, Control_All);
    this.Test.bind('mousedown', this, Control_Top);
}
function Control_All(event) {
    //this should bubble up through both c1 and c2
}
function Control_Top(event) {
    //this should stop at c2
}
Control.prototype.constructor = Control;
Control.prototype.All = Control_All;
Control.prototype.Top = Control_Top;

var c1 = new Control('body');
var c2 = new Control(c1.Test);

在上面的示例中，c1.Test和c2.Test的大小相同。我试图让mousedown事件调用这三个事件（我知道OO方法没有被维护，状态是通过event.data保存的，但我使用OO符号表示简单，在我的实际用例中All和单个委托是绑定变量顺序，仅在某些情况下，因此无法控制它们绑定的顺序）： c1.All c2.All c2.Single

我在Control_Top的末尾尝试了event.preventDefault（），event.stopPropagation（），event.stopImmediatePropagation（）和return（false），但没有一项工作如上所述。

修改：Here is a JSFiddle Link以帮助任何有兴趣帮助它的人。

再次编辑：解决使用全局和额外绑定到body.mousedown，here it is如果有人需要它，欢迎使用不使用全局或额外绑定的解决方案。

Answer 1

只需确认事件目标等于您将事件绑定到的元素。

http://jsfiddle.net/cvmEz/2/

function Control(parent,name) {
    this.Parent = $(parent);
    this.Parent.append('<div class="test" data-name="' + name + '"></div>');
    this.Test = $('.test', this.Parent).last();
    this.Test.bind('mousedown', this, Control_All);
    this.Test.bind('mousedown', this, Control_Top);
}
function Control_All(event) {
  if ( event.target == this) {
    console.log(this.getAttribute('data-name') + '.All');
  }
}
function Control_Top(event) {
  if ( event.target == this) {
    console.log(this.getAttribute('data-name') + '.Top');
  }
}
Control.prototype.constructor = Control;
Control.prototype.All = Control_All;
Control.prototype.Top = Control_Top;

var c1 = new Control('body', 'c1');
var c2 = new Control(c1.Test, 'c2');

console.log('--------');

停止特定事件处理程序的JQuery事件传播

1 个答案: