Onclick被调用两次

Question

这是代码：

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

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

如果单击按钮，则仅警告button ，但是当跨度时 - span和button都被警告 - 因此onclick函数被调用两次。

我怎么能阻止这个？ 我需要onclick才能被调用一次。

Answer 1

event.preventDefault(); 而不是event.stopPropagation(); 触发onclick只有点击的元素上。 在jsFiddle演示。

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>

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

希望能帮助到你..

Answer 4

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

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

Answer 5

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

function selectIconElement（elem，event）{

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

}