如何仅处理子元素的委派事件

Question

使用.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");

这就是为什么我要求一个选择器而不是一个修复程序。

Answer 1

您可以在处理程序内检查元素是否是事件处理程序委托给的元素的子元素；

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

参见e.delegateTarget。值得注意的是，e.delegateTarget是在jQuery1.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");

Answer 2

这对我有效。

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

Answer 3

只委托直接子级上触发的事件的一种方法是为on()提供一个完整的选择器，包括与父元素匹配的部分：

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

Answer 4

您只需要：

childSelector = "*";

如果它应该匹配选择器的任何子项。它只在选择器的范围内搜索。