使整個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);             

        });

有沒有一種方法可以從單擊的文本類元素中檢測父div的ID，還是我需要一種完全不同的方法？

我懷疑這很容易，但是我正在空白。

Answer 1

子元素接受自己的指針事件 ，您可以通過CSS阻止它們，以允許點擊落入父對象並觸發您想要的行為：

.square p {
    pointer-events: none;
}

Answer 2

有沒有一種方法可以從單擊的文本類元素中檢測父div的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 ，而e.target返回<p class="text">因此沒有要獲取的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>