javascript - Js 事件处理重叠元素不起作用。与范围有关吗？关于真/假？

Question

好的。让我告诉你我的问题很简单。

当我在元素上提供一些事件(如“点击”)时，某些情况下它不起作用。

例如，我在 id 'abc' 上触发...

 event of this element works fine : <li id="abc"> 123123123 </li>

 But this isn't : <li id="abc"> <b> 123123 </b> </li>

不知道为什么。

下面是代码:

entrance = document.getElementById('entrance');
joinSite = document.getElementById('joinSite');

// Event controller for multi browsers.
var Event = {
    add: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, true);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    remove: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, true);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },

    getEvent: function(event) {
        return event ? event : window.event;
    },

    getTarget: function(event) {
        return event.target || event.srcElement;
    },

    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

// Event delegation
Event.add(document,'click',function(event) {
    event = Event.getEvent(event);
    target = Event.getTarget(event);

    switch(target.id) {
        case 'linkLogin': // <li id="linkLogin> test </li> : works fine.
            entrance.style.display = 'block';
            break;

        case 'linkJoin': // <li id="linkJoin> <b> test </b> </li> : didn't work.
            alert('asdf');
            break;


        }       
    }
);

我真的不知道为什么。

据我所知，如果为事件处理程序提供“true”选项，事件捕获序列将接近文档的最低级别。

“窗口 - 文档 - 正文 - 父元素 - 子元素”

因此，如果为“文档”提供单击事件，则当我单击文档内的“元素儿子”时，该事件将起作用。

但这次不是。即使我在事件处理程序上给出 true 或 false 选项。

有谁知道这是为什么吗？

Answer 1

这与捕获阶段和冒泡阶段无关。这是您对事件委托(delegate)的使用:当您单击<b>时元素，该元素变为 target ，它没有预期的 id。您需要测试目标的所有父节点(直到 currentTarget ，即您的情况下的 document )是否是您想要监听的元素。