<label>で<button>を囲んでいるときにclickイベントが2回発火する問題の原因と対策

関連記事

<label>で<button>を囲んでいるときにclickイベントが2回発火する問題の原因と対策

皆さんこんにちは。今回は、最近筆者が遭遇した、<label>で<button>を囲んでいるときにclickイベントが2...概要を表示 皆さんこんにちは。今回は、最近筆者が遭遇した、<label>で<button>を囲んでいるときにclickイベントが2回発火することがある問題について解説します。 さっそくですが、こちらのCodePenをご覧ください。 ここでは、0と書かれたボタンが表示されています。このボタンは1回クリックすると数字が1増えるように実装されています。 しかし、ボタンに表示されている数字をクリックすると、数字が2増えてしまいます。これは、clickイベントが2回発火しているためです。それ以外の部分(ボタンの端や、ラベル)をクリックした場合は数字が1増えます。 実装のHTMLとJavaScriptは以下のとおりです。 <p>数字をクリックするとonClickが2回発火する!!!</p> <div> <label> ラベルのテスト <button type="button"></button> </label>

• html
• DOM
• フォーム
• あとで読む
• javascript
• イベント
• プログラミング

ブックマークしたユーザー

• techtech05212025年07月17日 techtech0521
• threeMonths2025年05月08日 threeMonths
• momonga_dash2025年01月09日 momonga_dash
• kabochatori2025年01月09日 kabochatori
• tyamamoto2025年01月09日 tyamamoto
• montdsichel2025年01月08日 montdsichel
• ntmukai2025年01月08日 ntmukai
• kkeisuke2025年01月08日 kkeisuke
• klim08242025年01月07日 klim0824
• triceratoppo2025年01月07日 triceratoppo
• u-qreil82025年01月07日 u-qreil8
• akishin9992025年01月07日 akishin999
• tabarka2025年01月07日 tabarka
• yoshi-na2025年01月07日 yoshi-na
• monoshizuka2025年01月07日 monoshizuka
• shino_azm2025年01月07日 shino_azm
• Akineko2025年01月07日 Akineko
• marutaku01312025年01月07日 marutaku0131