使整个Div(包括文本)可单击

Question

我有一系列可单击的div元素，我想根据每个DIV的唯一ID获取文本元素的内容。

<div class='square' id='sq12'><p class='text'><br/>"Text I want to fetch"</p></div>

我正在使用jQuery检测何时单击方形类，获取与之关联的ID，然后抓住文本类内容。当用户单击DIV中的任何位置时，它可以正常工作，但是如果他们直接在文本上单击，则无法读取父ID并抛出错误

Cannot read property 'getElementsByClassName' of null

我正在使用它来检测单击：

 $('body').on('click', '.square', function(e) 
         {
    var fetchedText = document.getElementById(e.target.id).getElementsByClassName('text')[0].innerHTML;
    alert(fetchedText);             
        });

是否有一种方法可以从单击的文本元素中检测父级的ID，还是我需要完全不同的方法？

我怀疑这很容易，但是我很清楚。

Answer 1

儿童元素接受自己的指针事件，您可以通过CSS防止它们，以允许单击落到父母身上并触发您的所需行为：

.square p {
    pointer-events: none;
}

Answer 2

是否可以从单击中检测父级的ID 文本级元素

您的选择器是.square，因此没有父母，如果要检测id，则可以使用$(this).attr('id')，并且使用$(this).children('.text').html()可以返回孩子html。

$('body').on('click', '.square', function(e) {
  var fetchedText = $(this).children('.text').html();
  var Id = $(this).attr('id');
  console.log(Id);
  console.log(fetchedText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>
<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>
<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>

但是，如果您想从孩子那里获得父级id，则可以尝试.parent()：

$('body').on('click', '.text', function(e) {
  // OR var fetchedText = $(this).html();
  var parentId = $(this).parent().attr('id');
  var fetchedText = $('#'+parentId).children('.text').html();
  console.log(fetchedText);
  console.log(parentId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>
<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>
<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>

e.target.id返回 id <p class="text">返回 CC_11，因此没有 id获取。

Answer 3

这对我有用

<style>
.square {
   height:50px;
   border:1px solid black
}
.text {
  border:1px solid green
}
</style>
<div class="square">
    <p class="text">hola</p>
</div>
<script>
$('body').on('click', '.square', function(e) 
{
    alert($(this).text());             
});
</script>