如何僅處理子元素的委託事件？

使用.on委託當事件如何定位的子元素：如何僅處理子元素的委託事件？

我曾嘗試：childSelector =

>*
>:nth-child(n)

但沒有什麼，當我開始>選擇。

$(selector).on(event, childSelector, handler);

有時候我希望定位直接孩子，有時我不：（僞代碼）

var func = function(selector, subSelector) { 
    $(selector).on("click", subSelector, function() { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first");

這就是爲什麼我問的選擇，而不是修復。

來源

2012-03-29 andlrc

您的編輯沒有任何意義。 A * child *是元素的直接後代元素，例如'child.parentNode ===父'。「間接孩子」只是一個後代;例如'descendant.parentNode.parentNode.parentNode（etc）=== ancestor'。由於事件冒泡如何起作用，如果委託處理程序接收到事件，則可以*保證*事件的目標是後代。 – Matt 2012-03-29 09:50:55

'@'安德里亞斯：查看我更新的答案。 – Matt 2012-03-29 10:44:42

您可以在處理程序是否在元素中檢查是事件處理程序委託給的元素的子元素;

$(selector).on("event", '*', function (e) { 
    if (e.target.parentNode === e.delegateTarget) { 
     // Woo! 
    } 
});

請參閱e.delegateTarget。值得注意的是，e.delegateTarget是在jQuery 1.7中引入的，因此在舊版本中不起作用。

關於您的第二次編輯，在它的當前形式中，選擇器是不明確的;您無法以代碼和當前形式檢測傳遞的選擇器是否僅作爲子選擇器。您可以引入另一個參數來指示它是打算成爲僅子選擇器，還是將>添加到選擇器的開頭（例如）並檢查它;

var func = function(selector, subSelector, isChild) { 
    $(selector).on("click", subSelector, function(e) { 
     if (isChild && e.parentNode == e.delegateTarget || !isChild) { 
      alert("my subSelector is clicked"); 
     } 
    }); 
} 

func("#wrapper", "direct-child-selector", true); 
func("#wrapper", ".some .other > .selector:first" /* , `false` is optional */);

或者：

var func = function(selector, subSelector) { 
    if (subSelector.charAt(0) === '>') { 
     subSelector = selector + subSelector; 
    } 

    $(selector).on("click", subSelector, function(e) { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "> direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first");

來源

2012-03-29 09:31:17 Matt

哇。不知道「微妙的目標」。但我仍然有一個問題，請參閱編輯問題 – andlrc 2012-03-29 09:45:44

好的謝謝你的幫助。因此，似乎沒有一個選擇器，您可以保證選擇直接的孩子，併爲解決方法選擇其他任何東西留出空間。 – andlrc 2012-03-29 11:05:05

我認爲它需要是'this.parentNode'而不是'e.parentNode'。也許'e.target.parentNode'也可以。 – 2012-07-07 17:05:59

的一種方式，只委託事件觸發的直接孩子是爲on()提供全面選擇，其中包括父元素相匹配的部分：

$(selector).on("event", selector + " > *", handler);

來源

2012-03-29 09:27:40

W3C將'*'定義爲「匹配所有元素」嗎？ http://www.w3.org/TR/CSS2/selector。html＃模式匹配 – LeeGee 2014-06-28 11:14:40

@LeeGee，是的。將它與一個子選擇符（例如'「div> *」'）耦合可以匹配給定元素集合中的所有直接子對象。 – 2014-06-28 11:47:09

所有你需要的是：

childSelector = "*";

如果它應該匹配選擇的任何子女。它僅在選擇器的範圍內進行搜索。

來源

2012-03-29 09:32:43

這將匹配所有*後代*。元素是一個孩子，如果它是一個**立即**後代。 – Matt 2012-03-29 09:34:33

這對我有用。

$('#container').on('click', '> .children', function(){ 
... 
})

來源

2013-07-24 17:38:21 alexndm

因爲你給孩子一個特定的班級。 – LeeGee 2014-06-28 11:12:03

如何僅處理子元素的委託事件？

回答

相關問題