包含的 div 中的意外 jquery 事件行为答案

【问题标题】：unexpected jquery event behaviour from within contained div包含的 div 中的意外 jquery 事件行为
【发布时间】：2015-08-10 23:56:46
【问题描述】：

我在我最近创建的一个小型 HTML 小部件上看到了意外行为。三个连续嵌入的 div，每个都有一个标记和一个菜单，在进入 div 时显示并在退出时隐藏。该标记旨在跟踪鼠标的垂直位置。这里的问题是 mouseover 事件仅在鼠标悬停在标记上时触发，而不是在鼠标悬停在包含的 div 上时触发。

http://jsfiddle.net/laurencefass/f47a7a2r/

$( ".outer, .inner, .middle" )
   .mouseenter(function(e) {
       $(this).children(".content:first").show();
  $(this).parents().children(".content:first").hide();

       $(this).children(".marker:first").show();
       $(this).parents().children(".marker:first").hide();
   })
   .mouseleave(function(e) {
       $(this).children(".content:first").hide();
       $(this).parents().children(".content:first").show();

       $(this).children(".marker:first").hide();
       $(this).parents().children(".marker:first").show();
   })
   .mouseover(function(e) {
    $(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY);
    var marker = $(this).children(".marker");
   marker.offset({top:e.pageY - marker.height()/2, right:0});});

.outer, .middle, .inner {
    font-size:0.8em;
    position:absolute;
    border:5px solid black;
    background-color:lightgray;
    text-align:center;
}

.outer {
    top:10%;
    left:10%;
    width:80%;
    height:500%;
}

.middle {
    top:5%;
    left:20%;
    width:60%;
    height:60%;
}

.inner {
    top:5%;
    left:30%;
    width:40%;
    height:60%;
}

.content {
    background-color:aliceblue;
    min-height:2em;
    min-width:50px;
    display:none;
}

.marker {
    height:50px;
    width:5em;
    background-color:black;
    position:absolute;
    right:0px;
    margin-right:2px;
    display:none;
    color:white;
    fontsize:0.8em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
    <div class="content">outer menu</div>
    <div class="marker">widget</div>
    <div class="middle">
        <div class="content">middle menu</div>
       <div class="marker">widget</div>
        <div class="inner">
            <div class="content">inner menu</div>
            <div class="marker">widget</div>
        </div>
    </div>
</div>

【问题讨论】：

您是否尝试在鼠标移动时更新标记位置？如果是，那么您需要使用 mousemove
谢谢。这解决了这个问题。虽然它没有解释为什么上面的 jquery 代码响应 $(".marker").mouseover 事件。

标签： javascript jquery html css

【解决方案1】：

这可以通过使用 CSS 来轻松完成。您也可以将此功能用于您的小部件。

.outer:hover>.content,
.middle:hover>.content,
.inner:hover>.content{
    display: block;
}

然后你可以去掉你的mouseenter和mouseleave

$( ".outer, .inner, .middle" )
   .mouseover(function(e) {
       var marker = $(this).children(".marker");
       marker.offset({top:e.pageY - marker.height()/2, right:0});
});

JSFiddle

如果您只想显示悬停元素的小部件，则必须使用 jQuery，此外，您可能会使用 mosemove() 事件将其始终保持在鼠标位置。

$( ".outer, .inner, .middle" ).mousemove(function(e) {
    e.stopPropagation();
    var marker = $(this).children(".marker");
    marker.eq(0).show();
    marker.offset({top:e.pageY - marker.height()/2, right:0});
});

$( ".inner, .middle" ).mouseenter(function(e) {
    if($('.marker', $(this).parent()).eq(0).length){
       $('.marker', $(this).parent()).eq(0).hide();
    }
});

$( ".outer, .inner, .middle" ).mouseleave(function(e) {
    if($('.marker', $(this).eq(0)).length){
       $('.marker', $(this).eq(0)).hide();
    }
});

JSFiddle

【讨论】：

这并不能解决 .mouseover 函数的问题，该函数似乎只对 .marker 事件作出反应，您可以通过包含以下行看到这些事件：$(".content", $(this))。 html("left = " + e.pageX + " right = " + e.pageY);
也尝试将 css 选择器应用于标记不会禁用更正父标记。所以三个都同时打开。我认为 js 是隐藏父标记的必要条件。
我给了你一个 jQuery 解决方案，其中只有所需的小部件可见

【解决方案2】：

我的期望：一个 rhs“浮动”小部件来跟踪鼠标的垂直位置，并且只有当光标在标记容器的范围内时才可见。

【讨论】：