Onclick is called twice

Question

Here's the code:

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

(and the fiddle: http://jsfiddle.net/YsYKq/1/)

If one clicks on the button, only button is alerted, but when on span - both span and button are alerted - so the onclick function is called twice.

How can I prevent this? I need onclick to be called only once.

Answer 1

event.preventDefault(); instead of event.stopPropagation(); triggers onclick on the clicked element only. A demo at jsFiddle.

Answer 2

Please try below code i am editing your code and change "stopPropagation" to "preventDefault".

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