4

这是代码:

<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只需要被叫一次。

4

5 回答 5

8

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

于 2013-03-05T09:57:38.860 回答
4

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

<label onclick="event.preventDefault(); alert(event.target.innerHTML);">
    <button>
        button
    </button> 
    <span>
        span
    </span>
</label>
于 2013-03-05T09:57:35.917 回答
0

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

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

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

希望能帮助到你..

于 2013-03-05T10:08:49.877 回答
0

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

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

于 2013-10-26T14:09:24.537 回答
0

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

功能选择图标元素(元素,事件){

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

}

于 2018-01-12T15:35:14.787 回答