Question

我有一个父元素，该元素具有在Jquery中使用.mouseover()实现的鼠标悬停事件处理程序。

它有2个子元素，一个包含图像元素，第二个包含具有绝对位置的描述元素。在父级mouseover上，描述在图像元素上滑动。

该项目的简化代码如下：

$('.main-parent').mouseenter(function(){
	$(this).addClass('item-hovered');
}).mouseleave(function(){
	$(this).removeClass('item-hovered');
});

.main-parent {
    position: relative;
}

.child-description {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: -45%;
    opacity: 0;
    transition: all 350ms;
}

.item-hovered .child-description {
    bottom: 10%;
    opacity: 1;
    transition: all 350ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
    <div class="child-image">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="child-description">
        <h4 class="title">Title</h4>
        <p class="subtitle">Subtitle</p>
        <p>Lorem ipsum paragraph...</p>
    </div>
</div>

正如预期的那样，.child-description触发mouseover绑定到.main-parent元素，因为它是它的子元素和一部分。

是否有一种方法可以忽略.child-description元素，以便它不会在mouseover事件上触发功能。问题是在hover元素之前，它是使用opacity: 0;对用户来说“不可见”的图像，但是仍可以将其悬停并用于触发父元素的mouseover。

对于stackoverflow上的这种特定解决方案，我没有找到答案，如果有的话，请告诉我。感谢您的帮助：）

Answer 1

是的，您将拦截该孩子的事件，然后呼叫event.preventDefault()和event.stopPropagation()，如下所示。

此外，JQuery不再建议使用事件快捷方式，例如mouseenter。相反，他们建议使用on()。

$(".child-description").on("mouseover", function(event){
  event.preventDefault();  // Cancel the event for this element
  event.stopPropagation(); // Prevent the event from propagating to other elements
});

$('.main-parent').on("mouseenter", function(){
	$(this).addClass('item-hovered');
}).on("mouseleave", function(){
	$(this).removeClass('item-hovered');
});

.main-parent {
    position: relative;
}

.child-description {
    color: #fff;
    font-size: 2em;
    position: absolute;
    bottom: -45%;
    opacity: 0;
    transition: all 350ms;
}

.item-hovered .child-description {
    bottom: 10%;
    opacity: 1;
    transition: all 350ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
    <div class="child-image">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg">
    </div>
    <div class="child-description">
        <h4 class="title">Title</h4>
        <p class="subtitle">Subtitle</p>
        <p>Lorem ipsum paragraph...</p>
    </div>
</div>

Answer 2

尝试将以下CSS规则添加到.child-description。

pointer-events: none;

.child-description {
  color: #fff;
  font-size: 2em;
  position: absolute;
  bottom: -45%;
  opacity: 0;
  transition: all 350ms;
  pointer-events: none;
}

.item-hovered .child-description {
  bottom: 10%;
  opacity: 1;
  transition: all 350ms;
  pointer-events: auto;
}

这应防止元素响应任何鼠标事件。如果您希望元素注册互动，则必须将pointer-events: none;换成pointer-events: auto;。

Answer 3

检查子描述是否是事件的目标

     $('.main-parent').mouseenter(function (e) {
        if (!$(e.target).hasClass('child-description')) {
            $(this).addClass('item-hovered');
        }
    }).mouseleave(function () {
        $(this).removeClass('item-hovered');
    });

Answer 4

我在这里看到一些有趣的答案，所以，我想我会提供自己的答案。

为什么不使用event.target和（在这种情况下）event.target.className？ Sample JSBIN Demo Online

例如...

$('.main-parent').mouseover(function(e) {
  if(e.target.className == 'subtitle') {
    console.log("Child mouseover!");
    return;  // child mouseover, ignore
  }

  console.log("Parent mouseover!");

  return true;  // parent mouseover, activate some behavior
});

这里的优势应该是显而易见的-您可以用相对较少的代码快速，轻松地控制逻辑路径。

Answer 5

您应该可以使用stopPropagation方法来阻止这种情况：

$('.child-description').on("mouseenter mouseleave", function(event) {
    event.stopPropagation();
});

防止特定的子元素触发jQuery中的父项的鼠标悬停事件

5 个答案: