我有一个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上。
当前回答
我没有得到工作的公认答案,但这似乎做的把戏,至少在香草JS。
if(e.target !== e.currentTarget) return;
其他回答
如果你不能使用指针事件: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
//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)
});
这将停止点击事件在.foobar元素的任何子元素上的传播(冒泡),因此事件不会到达.foobar元素以触发它们的事件处理程序。
这里是一个演示:http://jsfiddle.net/bQQJP/
你可以使用event. currentarget。它只会点击得到事件的元素。
目标= e => 控制台日志(e . currentTarget); 的; <ul onClick={target}类 < li > < p > <i类 < / p > < / li > < /德>
我没有得到工作的公认答案,但这似乎做的把戏,至少在香草JS。
if(e.target !== e.currentTarget) return;
// 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>