javascript – 为什么onclick元素会为label元素触发两次

前端之家收集整理的这篇文章主要介绍了javascript – 为什么onclick元素会为label元素触发两次前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
window.onload = function(){
         var wow = document.getElementById("wow");
    	 wow.onclick = function(){
    	     alert("hi");
    	 }
      }
<label id="wow"><input type="checkBox" name="checkBox" value="value">Text</label>

这是我的代码,当我点击“文本”时,它会提醒两次,但是当我点击框时,onclick元素只会触发一次,为什么?

解决方法

当您点击标签时,它会触发点击处理程序,并获得警报.

但点击一个标签也会自动发送一个点击事件到相关的输入元素,所以这被视为点击复选框.然后事件冒泡导致在包含元素(这是标签)上触发click事件,因此您的处理程序将再次运行.

如果您将HTML更改为此,您将无法获得双重警报:

<input id="wowcb" type="checkBox" name="checkBox" value="value">
<label id="wow" for="wowcb">Text</label>

标签现在与使用for属性的复选框相关联,而不是围绕它.

DEMO

原文链接:https://www.f2er.com/js/155551.html

猜你在找的JavaScript相关文章