Javascript DOM 单个元素的onclick事件触发器

Question

基本上我得到了一个页面，代码：

<body>
    <div onclick="alert('You clicked ' + this.tagName)">
       <h1 onclick="alert('You Clicked ' + this.tagName)">Click Me</h1>
    </div>
</body>

这不是我的确切脚本，但我出于演示目的重建了它，当我单击 H1 时，它会像它应该的那样发出警报，但是当我关闭警报框时，DIV 会出现，我尝试了另一种解决方法

document.addEventListener('click' , function(e){
     var target = e.target || e.srcElement;
     alert('You Clicked ' + target.tagName);
});

对于页面上的某些元素，由于奇怪的原因，这不适用于页面上的所有元素，这是一个原因，我错过了什么吗？

Answer 1

那是因为事件在尽可能深的元素上触发后，然后按嵌套顺序在父元素上触发

您需要在您的案例中停止事件传播

 <body>
        <div onclick="alert('You clicked ' + this.tagName)">
           <h1 onclick="alert('You Clicked ' + this.tagName);event.stopPropagation();">Click Me</h1>
            xcxc
        </div>
    </body>

这里是 fiddle： http://jsfiddle.net/9f8mfpvq/1/

Javascript DOM 单个元素的onclick事件触发器

Javascript DOM Onclick event trigger for single element

html

javascript

events

onclick