jQueryで親要素だけクリックされたときの指定方法

###jQueryで親要素だけクリックされたときの指定方法
JQueryで以下のHTMLで親要素だけクリックされたときの指定方法を教えてください。

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>Page Title</title>
5		<style>
6		    #wrapper{
7		        background-color:#000;
8		    }
9		    #test{
10		        background-color:#fff;
11		        margin:0 auto;
12		        width:50vw;
13		    }
14		</style>
15	</head>
16	<body>
17		<div id="wrapper">
18		    <div id="test">
19		        <p>ここをクリックされても何も起こらない。</p>
20		    </div>
21		</div>
22	</body>
23</html>

これだと#testをクリックしても動作してしまいます。どうすればいいですか？

JQuery
1$('#wrapper').click(function(){
2});

行動規範の内容に同意します

回答1件

ベストアンサー

イベントオブジェクトの中身を見て弾きましょう。

javascript
1$('#wrapper').click(function(e){
2  // このエレメントで発生したイベントだけをチェック
3  if(e.target !== e.currentTarget) return;
4  // ここでしたい処理を行う
5});

投稿2019/04/30 08:18

maisumakun

総合スコア145183

退会済みユーザー

2019/04/30 08:23

ありがとうございます。助かりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQueryで親要素だけクリックされたときの指定方法

関連した質問