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

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是在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");

Answer 2

这对我有用。

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

Answer 3

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

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

Answer 4

所有你需要的是：

childSelector = "*";

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