Question

点击install.packages(c('repr', 'IRkernel', 'IRdisplay'), repos = c('http://irkernel.github.io/', getOption('repos'))) IRkernel::installspec()时，我想触发content。我的alert中可以包含任意数量的子元素，因此我不想对每一个元素进行硬编码。我想也许我可以听取那个父元素的点击，然后每次点击孩子都会触发我的行动。但它没有用。

＆＃13;

content

＆＃13;

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  if (e.target === content  ) {
	alert('clicked!');
} 
});

＆＃13;

Answer 1

使用parentNode遍历DOM：

＆＃13;

var wrapper = document.getElementById('wrapper');    
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  var target = e.target;
  while(target.parentNode && target!==content) {target=target.parentNode;}

  if (target === content) {
    alert('clicked!');
  } 
});

＆＃13;

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

＆＃13;

注意：只有在#wrapper中有其他内容可以点击时才有意义。否则，您可以在不检查目标的情况下将点击事件附加到#content，因为事件无论如何都会冒泡。

Answer 2

根据我的评论尝试以下代码。您可以遍历树并检查内容元素。

＆＃13;

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {

  var element = e.target;

  while(element.parentNode) {
    
    if (element === content  ) {
      alert('clicked!');
      break;
    } 

    element = element.parentNode;

  }

});

＆＃13;

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

＆＃13;

但是，最好的方法是在没有任何条件的情况下向内容元素添加一个事件监听器：

＆＃13;

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

content.addEventListener("click",function(e) {

  alert('clicked!');

});

＆＃13;

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

＆＃13;

Answer 3

试试这个解决方案：

HTML：

<div id="wrapper" style="background-color:white">
  <div id="content" style="background-color:gray">
    <div>HELLO!</div>
    <div>WHUUUHUUU</div>
  </div>

  <div id="dontTrigger">
    <span>DONT!</span>
  </div>
</div>

JS：

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

content.addEventListener("click",function(e) {
    alert('clicked!');
});

Answer 4

event.target恰好是完成点击的dom。在这种情况下，span是目标如果你可以自由地使用jquery，你可以使用最接近的方法来选择与选择器匹配的最接近的父（包括self）：

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  if ($(e.target).closest('#content')[0]) {
	alert('clicked!');
} 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Answer 5

如果你希望#wrapper元素的每个孩子在点击时触发一个函数，我建议你这样做：

HTML：

<div id="wrapper" style="background-color:white">
    <div id="content" style="background-color:gray">
        <div>HELLO!</div>
        <div>WHUUUHUUU</div>
    </div>
</div>

JS：

var wrapper = document.getElementById('wrapper');
var contentNodes = wrapper.children;
for (var i = 0; i < contentNodes.length; i++)
{
    contentNodes[i].addEventListener('click', function(e) {
        alert('clicked !');
    });
}

这样，您还可以确定通过函数内部的变量this单击了哪个元素。

单击子项不会触发父单击

5 个答案:

HTML：

JS：