Question

假设我有一个只有h1和div元素的html doc。 div是一个简单的正方形，用背景颜色可见。

如果我使用仅使用JS代码附加click事件的常规方法（通过使用addEventListener），则仅在单击Div时正确执行函数fOnClick。单击H1或其他地方的文档时，该函数不会执行，与预期完全一样。

但是当评论dDragger.addEventListener ..行，并取消注释MyStuff.Events.bOn ..行（以启用事件处理模块）时，单击Div时函数fOnClick也会正确执行，但也是（单击H1或文档中的其他位置时执行错误！

我错过了什么吗？是否存在未被捕获的范围？

<!DOCTYPE html>
 <html>
  <head></head>
    <body>
        <h1>Events</h1>
        <div id="dragger" style="width:50px; height:50px; background-color: #444;"></div>

        <script>

var MyStuff = MyStuff || {};
MyStuff.Events = (function (oEvents) {

    oEvents.bOn = function (oElement, sEventName, fCallback) {
        var fListenerMethod = oElement.addEventListener || oElement.attachEvent,
            sEventName = oElement.addEventListener ? sEventName : 'on' + sEventName;
        return fListenerMethod(sEventName, fCallback) ? true : false;
    };

    return oEvents;
}(MyStuff.Events || {}));

var fOnClick = function(e) {
    e.preventDefault();
    console.log("fOnClick");
    return false;
};

dDragger = document.getElementById("dragger");

//dDragger.addEventListener("click", fOnClick);
MyStuff.Events.bOn(dDragger, "click", fOnClick);

        </script>
    </body>
</html>

Answer 1

问题在于：

<input type="file" webkitdirectory mozdirectory msdirectory odirectory directory multiple/>
<ul></ul>

按原样返回，return fListenerMethod(sEventName, fCallback) ? true : false;那里（现代浏览器中的fListenerMethod函数）未绑定到传递给addEventListener的元素。因此，它假设全局调用上下文，这意味着文档中任何位置的任何单击都将触发事件：

＆＃13;

bOn

＆＃13;

您应该使用适当的调用上下文（addEventListener('click', () => console.log('clicked'))）来调用该函数：

oElement

＆＃13;

return fListenerMethod.call(oElement, sEventName, fCallback) ? true : false;

＆＃13;

如何获取不在父元素中触发的事件

1 个答案: