javascript - Onclick 被调用两次

Question

这是代码：

<label onclick="event.stopPropagation(); alert(event.target.innerHTML);">
    <button>
        button
    </button> 
    <span>
        span
    </span>
</label>

（和小提琴：http: //jsfiddle.net/YsYKq/1/）

如果单击按钮，则仅button会发出警报，但是当在 span 上时-两者都会span发出button警报-因此该onclick函数会被调用两次。

我怎样才能防止这种情况？我onclick只需要被叫一次。

Answer 1

event.preventDefault();而不是仅在单击的元素上event.stopPropagation();触发。jsFiddleonclick的演示。

Answer 2

请尝试下面的代码，我正在编辑您的代码并将“stopPropagation”更改为“preventDefault”。

<label onclick="event.preventDefault(); alert(event.target.innerHTML);">
    <button>
        button
    </button> 
    <span>
        span
    </span>
</label>

Answer 3

@BenM 的建议非常完美但是如果您仍然想使用封闭按钮和跨度，那么这里有一种方法......

<label for="notExistingId" onclick="event.stopPropagation(); alert(event.target.innerHTML);">
<button>
    button
</button> 
<span>
    span
</span>

只需在 ID 不存在的标签中提供值“for”。

希望能帮助到你..

Answer 4

...当用户单击 iscroll 中的任何项目时，单击事件会被触发两次...

https://groups.google.com/forum/#!topic/iscroll/XL2Ny9gpKc0

Answer 5

我已经使用标签和复选框的不同 id 字段解决了这个问题 - 然后测试标签脚本的 event.target.label

功能选择图标元素（元素，事件）{

if(event.target.id.indexOf('label')>0){
    //do something if its label
}else{
    //do something if not label
}

}