$（event.target）未檢測到任何內部元素

-1

我有一個元素，單擊時顯示內部文本（最初設置爲display: none）。我想在內部文本中添加一個範圍來關閉文本，但$(event.target)在這種情況下不起作用，我不知道爲什麼。還值得注意的是，該文本中的鏈接也不起作用。

HTML

<div class="blog-block-2"> 
    <div class="blog-entry-language-2"> 
    <h2> Test Header</h2> 
    </div> 

    <div class="blog-entry-main-2"> 

     <div class="blog-entry-image-2"></div> 
     <div class="blog-entry-text-wrap-2"> 
      <h2>Test header <span class="close">X</span></h2> 
      <p> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 
      </p> 
      <p> 
       Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. <a href="#">Aenean dignissim</a> pellentesque felis. 
      </p> 
     <div class="overlay"></div> 
     </div> 
    </div> 

    <div class="blog-entry-extra-2"> 
     <h1> Extra tag </h1> 
    </div> 
</div>

$(".blog-block-2").on("click",function(event){ 
    var target = $(event.target); 
    if(target.is("span")){ 
     console.log("clicked outside"); 
     hideText(); 
    } else { 
     showText(); 
     console.log("clicked"); 
    } 
})

的jsfiddle：

https://jsfiddle.net/ukbx8m1b/

來源

2017-10-19 Sergi

我懷疑這將是一些奇怪的CSS問題。如果您檢查該div的任何部分上的元素，它會爲您提供blog-block-2 div而不是您右鍵單擊的內容。這似乎不是一個事件授權問題。更可能與z指數有關。 –

你想在哪裏關閉按鈕？ – Keith

這並不重要，我只是想讓事件目標真正識別「blog-block-2」中的任何內容。 – Sergi

-1

如果你想使用你的文本標題創建的「X」，你有使其脫穎而出。目前一切都是平穩的，所以當你點擊那個區域時，你會得到父母「blog-block-2」。如果添加位置和z-index的父元素，並密切類，它會按照您想要的：

https://jsfiddle.net/ukbx8m1b/1/

.blog-block-2{ 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 150px; 
    position: relative; 
    z-index: 1; 
} 
.close{ 
    position: relative; 
    z-index: 1000; 
}

來源

2017-10-19 19:19:45 Keith

$（event.target）未檢測到任何內部元素

回答

相關問題