0

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

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 表示法，在我的实际用例中全部和单个委托是绑定变量顺序，并且仅在某些情况下，因此无法控制它们绑定的顺序）： c1.All c2.All c2.Single

我已经在 Control_Top 的末尾尝试了 event.preventDefault()、event.stopPropagation()、event.stopImmediatePropagation() 和 return(false)，但是如上所述，没有任何工作要做。

编辑：这是一个 JSFiddle 链接，可以帮助任何有兴趣帮助它的人。

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

4

1 回答 1

3

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

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('--------');
于 2013-01-11T18:41:13.050 回答