Question

我有一个元素，当点击时，会显示一个内部文本（最初设置为display: none）。我想在内部文本中添加一个span来关闭该文本，但$(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>

JS

$(".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/

Answer 1

如果您想使用在文本标题中创建的“X”，则必须使其脱颖而出。目前一切都是平的，所以当你点击该区域时，你会得到父“blog-block-2”。如果将position和z-index添加到父元素和close类，它将按您的意愿工作：

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;
}

$（event.target）没有检测到任何内部元素

1 个答案: