Ich möchte keine Klicks auf andere als einige Kinder, und die Eltern div selbst auslösen Ereignisse.Wie kann überprüft werden, ob der Klick direkt in einem Element oder nur in einigen seiner untergeordneten Elemente erfolgt ist?
Bitte beachten Sie dies, was nicht tut, was ich will:
https://jsfiddle.net/k12e8rgt/3/
$(document).ready(function() {
$('#parent').on('click', function(event) {
alert("you clicked directly on me!");
});
});
Sie event.target
Beispiel verwenden können:
$(document).ready(function() {
$("div").on("click", function(event) {
alert("You click on : " + event.target.tagName)
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>this is Div
<p>This is p</p>
</div>Ich sehe nicht, wie dies hilft, können Sie das näher erläutern? Das "nicht hier" -Kind kann viele childs enthalten, und in diesem Fall wird event.target eines davon sein, sodass ich nicht einfach vergleichen kann, ob event.target == .not.here. – Lao
Sie können dem Div ein eindeutiges ID/Class/Data-Attribut geben, das über das event.target -Objekt erhalten werden kann, da dies das tatsächlich angeklickte dom-Element ist ... dann können Sie wissen, ob das Attribut das ist, was Sie wollen und auslösen die Aktion, wenn diese existiert, oder nicht, wenn dies nicht der Fall ist – Stu
Verwenden event.target ...
https://api.jquery.com/event.target/
Auch für Ereignis im allgemeinen Umgang mit jQuery ...
ignored.hasClass() zu erkennen rmine, ob eine der abgestimmte Elemente der gegebenen Klasse$('#parent').on('click', function(event) {
if ($(event.target).hasClass('ignore')) {
alert("Ignore !");
} else {
alert("Do something!");
}
});#parent {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
#child2 {
background-color: white;
color: red;
margin: 10px;
}
#child1 {
background-color: white;
color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">it should trigger here
<div id="child1">and here</div>
<div id="child2" class="ignore">but not here, and there are many of this kind</div>
</div>Wenn dort gesetzt sind von ids zugeordnet sind, die ignored werden sollen, verwenden event.target.id Eigenschaft und Testen der Wert dagegen !
$('#parent').on('click', function(event) {
if (event.target.id === 'child2' || event.target.id === 'child3') {
alert("Ignore !");
} else {
alert("Do something!");
}
});#parent {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
#child2 {
background-color: white;
color: red;
margin: 10px;
}
#child3 {
background-color: white;
color: red;
margin: 10px;
}
#child1 {
background-color: white;
color: green;
margin: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">it should trigger here
<div id="child1">and here</div>
<div id="child2">but not here, and there are many of this kind</div>
<div id="child3">but not here, and there are many of this kind</div>
</div>
https://jsfiddle.net/k12e8rgt/5/ – adeneo