Question

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

当我在元素上发布一些事件（比如＆＃39;点击＆＃39;）时，有些情况下它不起作用。

例如，我在id＆＃39; abc＆＃39; ...

上给出了触发器

 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;


        }       
    }
);

我真的不知道为什么。

据我所知，事件捕获序列将接近最低级别的文档，如果给出真实的＆＃39;事件处理程序的选项。

＆＃34; window - document - body - elements father - elements son＆＃34;

因此，如果向文档＆＃39;提供点击事件，如果我点击＆＃34; elements son＆＃34;内部文件。

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

有谁知道为什么？

Answer 1

它不是关于捕获与冒泡阶段。它是您对事件委派的使用：当您单击<b>元素时，该元素将变为target，其中没有预期的ID。您需要测试目标的所有父节点（直到currentTarget，即您的情况下为document）才能成为您想要侦听的元素。

对重叠元素的Js事件处理是不行的。它的范围是什么？关于真/假？

1 个答案: