オレンジ色の部分を押せば更新が起こり、緑色の部分を押せば更新はおこらないようにする

Question

次のようなコードがあります。

オレンジ色の部分を押せば、更新が起こります（実際には何も起こりません）が、緑色の部分を押せば、「そこを押しても更新は起こりません。」メッセージが出ます。

しかしながら、オレンジ色の部分は緑色の部分の中に入れ子として入っているのです。

ですので、オレンジ色の部分を押すと、「そこを押しても更新は起こりません。」メッセージが出てしまいます。

やりたいこと→緑色の部分を押したときだけ、「そこを押しても更新は起こりません。」メッセージが出るようにしたい。

どなたかご存じの方がおられましたら、よろしくお願いいたします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div id="container">
	<div id="refresh">更新する</div>
</div>

<script type="text/javascript">
	$('#container').click(function() {
		alert('そこを押しても更新は起こりません。');
	});
</script>

<style type="text/css">
#container {
	width: 400px;
	height: 400px;
	background-color: green;
	text-align: center;
}

#refresh {
	width: 200px;
	height: 100px;
	background-color: orange;
}
</style>

Comments

[退会済みユーザー]

「javascript イベント 停止」で検索してください。

[tiqua_nibio]

やってみましたが、だめでした。

Answer 1

$('#container').click(function( e ) {
  if ( e.target.id === 'refresh' ) return;
  alert('そこを押しても更新は起こりません。');
});
```**動くサンプル：**[https://jsfiddle.net/Lart9no2/](https://jsfiddle.net/Lart9no2/)

---

【e.targetの扱いには注意しよう - Qiita】
[https://qiita.com/sasurai_usagi3/items/45d61fd08cdf7cff57fa](https://qiita.com/sasurai_usagi3/items/45d61fd08cdf7cff57fa)

【e.targetとe.currentTargetの違い | cly7796.net】
[http://cly7796.net/wp/javascript/e-target-and-e-current-target/](http://cly7796.net/wp/javascript/e-target-and-e-current-target/)

【event.curretTargetとevent.targetの違い - gsol-dev's blog】
[http://gsol.hatenablog.com/entry/2013/12/04/event.curretTarget%E3%81%A8event.target%E3%81%AE%E9%81%95%E3%81%84](http://gsol.hatenablog.com/entry/2013/12/04/event.curretTarget%E3%81%A8event.target%E3%81%AE%E9%81%95%E3%81%84)

Comments

[tiqua_nibio]

うまくいきました。ありがとうございます。

Answer 2

緑色の部分を押したときだけ

の定義が、以下どちらかなのかによりますね

• #refreshのとき
• 直接#containerをクリックしたとき以外

前者はすでにkei344さんが回答されているとおり、後者ならこう

$('#container').on('click',function(e){
  if(e.currentTarget==e.target){
    alert('そこを押しても更新は起こりません。');
  }
});