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

Javascript DOM Onclick event trigger for single element

本文关键字：Onclick 事件 触发器 DOM Javascript 元素 单个      更新时间：2023-09-26

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

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

对于页面上的一些元素，这并没有在页面的所有元素上工作，因为一个奇怪的原因是这个原因，我错过了什么吗?

这是因为在最深层的元素上触发事件后，它会按嵌套顺序触发父元素

在这种情况下，您需要停止事件传播

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

here the fiddle:http://jsfiddle.net/9f8mfpvq/1/

相关文章：