javascript - Onclickは2回呼び出されます

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関数が2回呼び出されます。

どうすればこれを防ぐことができますか？onclick一度だけ呼ばれる必要があります。

Answer 1

event.preventDefault();クリックされた要素のみでevent.stopPropagation();トリガーする代わりに。jsFiddleonclickのデモ。

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>

存在しない ID を持つラベルに「for」の値を指定するだけです。

それが役に立てば幸い..