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

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