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

请尝试以下代码我正在编辑您的代码并更改＆＃34; stopPropagation＆＃34; to＆＃34; preventDefault＆＃34;。

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

}

Onclick被调用两次

5 个答案: