Question

我有3 div's：div1, div2, div3。当用户点击每个div时，我只想console log该特定div的内容。我读到了关于事件冒泡的消息，并了解click event的{{1}}也将在child级别注册。我尝试了以下代码，但无法使其正常工作。

parent

$(document).ready(function() {
  $('#parent').on('click', 'div', function() {
    console.log($(this).text());
  })
})

#div1 {
  width: 300px;
  height: 200px;
  padding: 25px;
  background-color: red;
  text-align: center;
}
#div2 {
  width: 250px;
  height: 150px;
  background-color: blue;
  padding: 25px;
  text-align: center;
}
#div3 {
  width: 200px;
  height: 100px;
  background-color: green;
  text-align: center;
}

如果我<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="parent"> <div id="div1">div1 <div id="div2">div2 <div id="div3">div3</div> </div> </div> </div> </body>，div1 click div1 div2 click div2 div3，我怎样才能打印click div3？< / LI>
是jQuery text()打印内容的正确方法吗？我可以看到它是印刷空间和所有

Answer 1

问题不仅与事件冒泡有关，而且还与元素的text()包含其自身及其所有子元素的文本有关。

要执行您需要的操作，您需要filter()当前元素的contents()来仅检索文本节点 - 假设您要丢弃包含在任何子元素中的文本。

试试这个：

$('#parent').on('click', 'div', function(e) {
    e.stopPropagation();
    var nodes = $(this).contents().filter(function() {
        return this.nodeType == 3 && this.nodeValue.trim() != '';
    });
    console.log(nodes[0].nodeValue.trim());
});

Working example

Answer 2

根据this solution

尝试此操作

$('#parent').on('click', 'div', function(e){
    e.stopPropagation();
    console.log($(this)
      .clone()
      .children()
      .remove()
      .end()
      .text()
      .trim()
   );
})

多个div的显示内容，点击，防止事件冒泡

2 个答案: