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(); instead of 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的建议很完美，但如果你仍然想使用封闭按钮和span，那么这里有一个方法……

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

​

只是在带有不存在的ID的标签中提供了值'for‘。

希望能有所帮助..。