HTML イベントのキャンセル

Question

divにonclick="location.href='https://yahoo.co.jp'"
imgにonclick="alert('hello')"を設定しています

imgをクリックした場合、divも押したことになり、ページ移動が発生します
下記ソースコードのような書き方でalert('hello')のみを発生させ、location.href='https://yahoo.co.jp'を発生させない方法はありますでしょうか？

<div style="width:100%;height:30%;background-color:red" onclick="location.href='https://yahoo.co.jp'">
<img src="https://sozai.site/wp-content/uploads/2016/09/presents_boy.png" width="20" height="20" onclick="alert('hello')">
</div>

Comments

[m.ts10806]

locationのほうを書かなければ良い話では？前提や背景を記載してください。

Answer 1

Event.preventDefault()
Event.stopPropagation()

<div style="width:100%;height:30%;background-color:red" onclick="location.href='https://yahoo.co.jp'">
<img src="https://sozai.site/wp-content/uploads/2016/09/presents_boy.png" width="20" height="20" onclick="alert('hello');window.event.stopPropagation();">
</div>

こんな実装の仕方するよりhtml見直した方が良いんでないかい

Answer 2

下記ソースコードのような書き方でalert('hello')のみを発生させ、location.href='https://yahoo.co.jp'を発生させない方法はありますでしょうか？

<div style="width:100%;height:30%;background-color:red" onclick="location.href='https://yahoo.co.jp'">
<img src="https://sozai.site/wp-content/uploads/2016/09/presents_boy.png" width="20" height="20" onclick="alert('hello')">
</div>

javascript イベント伝播 の検索結果を読むのがいいかと

Comments

[ftyue]

無事に解決できました
ありがとうございます

<div style="width:100%;height:30%;background-color:red" onclick="location.href='https://yahoo.co.jp'">
<img src="https://sozai.site/wp-content/uploads/2016/09/presents_boy.png" width="20" height="20" onclick="event.stopPropagation();alert('hello')">
</div>