停止JQuery的事件傳播的特定事件處理

我試圖阻止事件傳播只針對特定的事件處理程序，同時允許在同一事件他人傳播，這裏有一個例子：停止JQuery的事件傳播的特定事件處理

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事件調用這三個事件（我知道面向對象的方法沒有被維護，狀態通過event.data保存，但我使用OO表示法來簡化，在我的實際使用案例All和單委託綁定變量的訂單，只有在某些情況下，所以在它們所連接的順序是無法控制的）： c1.All c2.All c2.Single

我已經嘗試event.preventDefault（），event.stopPropagation（），event.stopImmediatePropagation（），並在Control_Top結尾處返回（false），但是沒有一個可以像上面描述的那樣工作。

編輯：Here is a JSFiddle Link幫助任何有興趣的人幫助它。

再次編輯：如果有人需要，可以使用全局綁定和額外綁定到body.mousedown，here it is，歡迎使用不使用全局綁定或額外綁定的解決方案。

來源

2013-01-11 CoryG

這裏只有一個「事件」發生。事件冒泡，而不是事件處理程序。如果您停止傳播該事件，則它不會傳播到任一處理程序。只要讓你的處理程序更加具體，以便他們只在你希望他們處理的地方處理事件。 –

凱文，我在你的迴應之後解決了它，並且在編輯中發佈瞭解決方案，在我的具體情況下，事件實際上受到來自兩個不同點的控制的約束（一個內部應該起泡，另一個應該只被調用一次儘管事實上控件可以嵌套在彼此的內部，但是可以監聽頁面中的每個控件）。我提出的全球+額外綁定解決方案感覺有點笨拙，但它有效，我需要轉到下一部分。 – CoryG

這是你想要的嗎？ http://jsfiddle.net/cvmEz/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('--------');

來源

2013-01-11 18:41:13

停止JQuery的事件傳播的特定事件處理

回答

相關問題