クラス化されたDIVと、foobar
そのDIV内にクラス化されていないいくつかのDIVがありますが、それらはfoobar
クラスを継承していると思います。
$('.foobar').on('click', function() { /*...do stuff...*/ });
DIVのどこかをクリックしたときにのみ、その子DIVでクリックしないと発砲したいと思います。
クラス化されたDIVと、foobar
そのDIV内にクラス化されていないいくつかのDIVがありますが、それらはfoobar
クラスを継承していると思います。
$('.foobar').on('click', function() { /*...do stuff...*/ });
DIVのどこかをクリックしたときにのみ、その子DIVでクリックしないと発砲したいと思います。
回答:
e.target
がと同じ要素の場合、this
子孫をクリックしていません。
$('.foobar').on('click', function(e) {
if (e.target !== this)
return;
alert( 'clicked the foobar' );
});
.foobar {
padding: 20px; background: yellow;
}
span {
background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert)
<span>child (no alert)</span>
</div>
===
または!==
使用の「厳密な等価比較アルゴリズム」、しばらく==
して!=
の使用「抽象平等の比較アルゴリズム」タイプの保磁力です。一般に、強制的な型が特に必要でない限り(その規則は少し複雑であるため)、厳密な比較を使用するのが賢明です。この場合、オブジェクトが比較されているため、実際には違いはありませんが、ほとんどの人は厳密な比較を続けることに気付くでしょう。
新しいブラウザだけをターゲットにすることを気にしない場合に機能する別の方法があります。CSSを追加するだけ
pointer-events: none;
クリックをキャプチャするdivのすべての子に。こちらがサポートテーブルです
click
プログラマティッククリックイベントトリガーを確実にブロックする方法を教えてください。
あなたはあなたの好意でバブリングを使うことができます:
$('.foobar').on('click', function(e) {
// do your thing.
}).on('click', 'div', function(e) {
// clicked on descendant div
e.stopPropagation();
});
<a>
要素のクリックのみを除外したいので、これは私の特定のシナリオに最適なソリューションのように見えます。問題は1つだけです。それらを中央クリックしても、イベントがトリガーされます(Google Chromeでテスト済み)。これを防ぐバリアントはありますか?
//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
event.stopPropagation();
//you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});
これclick
により、要素の子要素のいずれかでのイベントの伝播(バブリング)が停止する.foobar
ため、イベントは.foobar
要素に到達せず、イベントハンドラーを起動しません。
ここにデモがあります:http : //jsfiddle.net/bQQJP/
私の場合も同様ですが、これはfoobar
-s が少なく、1回のクリックで1つだけ閉じたい場合です。
$(".foobar-close-button-class").on("click", function () {
$(this).parents('.foobar').fadeOut( 100 );
// 'this' - means that you finding some parent class from '.foobar-close-button-class'
// '.parents' -means that you finding parent class with name '.foobar'
});
$(".foobar-close-button-class").on("click", function () {
$(this).child('.foobar-close-button-child-class').fadeOut( 100 );
// 'this' - means that you finding some child class from '.foobar-close-button-class'
// '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});
使用できずpointer-events: none;
、最新のブラウザーをターゲットにcomposedPath
している場合は、次のようにして、オブジェクトの直接クリックを検出できます。
element.addEventListener("click", function (ev) {
if (ev.composedPath()[0] === this) {
// your code here ...
}
})
あなたがここでcomposedPathについてもっと読むことができます:https: //developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
// if its li get value
document.getElementById('li').addEventListener("click", function(e) {
if (e.target == this) {
UodateNote(e.target.id);
}
})
function UodateNote(e) {
let nt_id = document.createElement("div");
// append container to duc.
document.body.appendChild(nt_id);
nt_id.id = "hi";
// get conatiner value .
nt_id.innerHTML = e;
// body...
console.log(e);
}
li{
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
width: 380px;
height: 80px;
background-color: silver;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 0.5cm;
border: 2px solid purple;
border-radius: 12%;}
p{
cursor: text;
font-size: 16px;
font-weight: normal;
display: block;
max-width: 370px;
max-height: 40px;
overflow-x: hidden;}
<li id="li"><p>hi</p></li>