2016-10-07 4 views
0

body要素にバインドされたclickイベントがありますが、ユーザーが特定の要素をクリックしたとき、つまりその要素の属性がdata-dropdown-targetしかし、私が試したことは動作していない、それは常に発生します。ボディにバインドされたセレクタから特定の要素を削除する

CodePen:http://codepen.io/anon/pen/ORQkrb

HTML:

<body> 
    <div class="foo">foo</div> 
    <div class="bar" data-dropdown-target="something">bar</div> 
    <div class="moo">moo</div> 
</body> 

CSS:

.foo, .bar, .moo { 
    padding: 10px; 
    margin: 5px; 
} 

.foo { 
    background-color: gray; 
} 

.bar { 
    background-color: teal; 
} 

.moo { 
    background-color: green; 
} 

JS:

$('body').not('[data-dropdown-target]').on('click', function(e) { 

    console.log('Hi!'); 

}); 

私はそれはむしろそれの子供たちよりも、この属性を持つbody要素を削除するをしようとであるためであると仮定 - 正しいですか?

この属性を持つ子要素の発射を中止するにはどうすればよいですか?性能上の理由から、特に本体上にあるため、すべてをループする必要があります。

+0

:ライン '$( 'ボディ')ではない( '[データ・ドロップダウン・ターゲット]')( 'クリック'、関数(E){})で、'私が '$(" body ")を$(" body ".find(" div:not() ")'に変更したときにうまくいくと思われます。 – reporter

答えて

1

実際には、属性なしですべての<body>をクリックするとイベントがバインドされます。

これはあなたの問題を解決することができます:

$('body').on('click', function(e) { 
 
    if($(e.target).data('dropdown-target') || $(e.target).parents('[data-dropdown-target]').length !== 0) return false; 
 
    console.log('Hi!'); 
 

 
});
.foo, .bar, .moo { 
 
    padding: 10px; 
 
    margin: 5px; 
 
} 
 

 
.foo { 
 
    background-color: gray; 
 
} 
 

 
.bar { 
 
    background-color: teal; 
 
} 
 

 
.moo { 
 
    background-color: green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    
 
    <div class="foo">foo</div> 
 
    <div class="bar" data-dropdown-target="something">bar</div> 
 
    <div data-dropdown-target="something"> 
 
    <div class="moo">moo</div> 
 
    </div> 
 
</body>

+0

何が起こっていた、あなたの考えは働いた。ありがとう! – Brett

0

notセレクタそれは[data-dropdown-target]属性を持っている場合だけでbody要素を削除します。

一致する要素のセットから要素を削除します。あなたの例によれば

$('body').on('click', function(e) { 

    console.log('Hi!'); 

}); 

$('[data-dropdown-target]').on('click',function(e){ 
return false; 
}); 
関連する問題