我有一个动态选择器(linkTrigger)，它应该捕获点击元素。我不知道linkTrigger可能是什么，也不知道它是否会有一些孩子。当我使用jQuery时，一切都很好。
如果你点击第一个绿色矩形(不是数字部分)，你会看到所有3个处理程序按预期工作，但如果你点击第一个绿色矩形中的数字，只有jQuery和javascript2处理程序工作，再次如预期的那样，因为点击绿色框中的span不满足以下条件:
if (e.target.classList.contains(linkTrigger.substring(1))) {
我不能使用css point-events none对于子节点，我不想被点击因为我不知道linkTrigger是，我也不想打乱它的内容
，问题是javascript2处理程序不是动态的，这意味着我必须将此处理程序添加到每个新的";
有更好的解决方案吗?
var linkTrigger = '.c'
//jquery works fine and its live
$('.wrap').on('click', linkTrigger, function(e) {
var parent = $(this).closest('.a'),
id = parent.attr('data-id')
console.log('jquery: ' + id)
})
//javscript works but not if we click on child (number span inside green rectangle) and its live. I cant use **css point-events none** on children I dont want to be clicked because I dont knwo what **linkTrigger** is, neither I want to mess with its contents.
document.querySelector('.wrap').addEventListener('click', function(e){
if (e.target.classList.contains(linkTrigger.substring(1))) {
var parent = e.target.closest('.a'),
id = parent.getAttribute('data-id')
console.log('js: ' + id)
}
})
//javscript2 works but its not live, meaning if I add more ".a" containers I have to attach this function call to each item.
document.querySelectorAll(linkTrigger).forEach(function(el){
el.addEventListener('click', function(e){
var parent = e.target.closest('.a'),
id = parent.getAttribute('data-id')
console.log('js2: ' + id)
})
}).a{
width:300px;
height:300px;
background:red;
margin:1px;
}
.b{
width:200px;
height:200px;
background:blue;
}
.c{
width:100px;
height:100px;
background:green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
<div class="a" data-id="0">
<div class="b">
<div class="c"><span>657567645</span></div>
</div>
</div>
<div class="a" data-id="1">
<div class="b">
<div class="c"></div>
</div>
</div>
</div>event.target正是您点击的内容。所以当你点击元素中的span时，你得到的是span，而不是父元素。
因此，要使span上的点击注册，您可以使用close()，就像获取锚标记一样。
var linkTrigger = '.c'
//jquery works fine and its live
$('.wrap').on('click', linkTrigger, function(e) {
var parent = $(this).closest('.a'),
id = parent.attr('data-id')
console.log('jquery: ' + id)
})
document.querySelector('.wrap').addEventListener('click', function(e){
if (e.target.closest(linkTrigger)) {
var parent = e.target.closest('.a'),
id = parent.getAttribute('data-id')
console.log('js: ' + id)
}
}).a{
width:300px;
height:300px;
background:red;
margin:1px;
}
.b{
width:200px;
height:200px;
background:blue;
}
.c{
width:100px;
height:100px;
background:green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
<div class="a" data-id="0">
<div class="b">
<div class="c"><span>657567645</span></div>
</div>
</div>
<div class="a" data-id="1">
<div class="b">
<div class="c"></div>
</div>
</div>
</div>