0

我需要知道如何解决这个问题。我的列表上有一个 mouseleave 事件。

jQuery(".list").live("mouseleave", function(event) {

    alert("Boom");

});

但同时我在它上面显示了一个工具提示。此工具提示不属于此列表，它在其他 div 中。

现在，当我将鼠标移到那个 div 上时，我收到了一个警报——我离开了列表。

请告诉我，当我在此工具提示中移动鼠标时，我该怎么做，不会有任何动作。

我试过这句话，但它不起作用：

if($(event.target).hasClass('name')) alert("D");
4

3 回答 3

1

这是您的问题的有效解决方案：http: //jsfiddle.net/SVzv5/8/

在此示例中，红色方块是您的列表，蓝色方块是您的工具提示。在 jsfiddle 上与他们互动以查看他们的工作。

html代码：

<div id="under"></div>
<div id="over"></div>

jQuery代码：

$('#under').bind('mouseover', function () {
    $(this).css({background:'yellow'});
}).bind('mouseout', function () {
    $(this).css({background:'red'});
});

CSS 代码：

#under {
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background:red;
    display:block;
    cursor:pointer;
}
#over {
    position:absolute;
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background:blue;
    display:block;
    pointer-events: none;
}
于 2012-09-20T21:32:32.350 回答
0

基本上，您需要执行您的事件处理程序，并在鼠标进入您的工具提示时取消它。它将通过以下方式实现：

变量超时；

handler = function () { 
    // handler 
};

jQuery('.list').bind('mouseout', function (event) {
    timeout = setTimeout(handler, 250);
});

jQuery('#tooltipId').bind('mouseover', function (event) {
    clearTimeout(timeout);
});
于 2012-09-20T21:31:32.093 回答
0

您可以使用事件中的relatedTarget属性mouseleave，它包含mouseleave事件触发时鼠标所在的元素的对象：

jQuery('.list').bind('mouseleave', function(event) {
  if(jQuery(event.relatedTarget).attr('id') != 'yourToolTipId') {
    alert("Boom");
  }
});
于 2012-09-20T21:43:47.263 回答