标签: mouseleave

我有几个'触发器'(<li>s)的列表,每个触发器显示一个特定的DIV,每个DIV都有'关闭'按钮.

现在,我希望通过向打开/可见DIV添加计时器/延迟来提高可用性,以便在用户将鼠标从触发器移开后3或5秒后,打开/可见的DIV淡出.

我现在遇到的问题是,每当我使用.mouseleave()添加一个函数时,只要鼠标离开触发区域,就会隐藏打开/可见的DIV.

但是,如果删除该功能,则DIV保持可见,您可以通过单击关闭按钮将其关闭.

这是我的情况的FIDDLE/DEMO.

任何帮助将不胜感激.

谢谢.

我有一个带有mouseleave事件监听器的可排序列表,其行为不正确.

如果我将鼠标移入和移出可排序列表,则mouseleave会正确触发.

如果我首先单击并拖动其中一个可排序的子项,则mouseleave会错误地触发 - 偶尔或根本不会触发.

有任何想法吗？

谢谢.

更新:这也适用于mouseout事件.

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background-color: #CCC; }

#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

<script>
  $(function(){
    $("#sortable").sortable().disableSelection();
    $("#sortable").mouseleave(function(){ console.log("mouseleave"); });
  });   
</script>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

更新 我使用以下内容来检测孩子被完全拖出可排序的时间:

$("#sortable li").mousemove(function() {
        if ($(this).offset().left > $(this).parent().outerWidth() + $(this).parent().offset().left ||
                $(this).offset().top > $(this).parent().outerHeight() + $(this).parent().offset().top  ||
                $(this).offset().left + …

jQuery 的 mouseleave 似乎会在任何覆盖元素上触发。我不希望这些覆盖元素被视为“超出”我的目标区域。这是一个使用 jQueryUI 中的日期选择器的简单示例：

http://jsfiddle.net/6Wm9L/

$("#datepicker").datepicker({});

$(".wrapper")
.mouseenter(function(){
    $("#status").html("Status: Mouse is INSIDE");
})
.mouseleave(function(){
    $("#status").html("Status: Mouse is OUTSIDE");
});

请注意，当鼠标悬停在日期选择器上时，将触发 mouseleave。对于这个日期选择器示例，有什么好的解决方案可以防止这种情况发生？对于我未来可能添加的涵盖目标的任何元素，什么是好的解决方案？

我确定我忽略了一些东西,但是在我替换触发了mouseenter的锚标签中的html后,我似乎无法触发"mouseleave"事件.

在这里添加代码但是如果你访问下面的JSFiddle链接并将鼠标悬停在星形图标上,它实际上要简单得多.

$(document).ready(function () {
    $(document).on('mouseenter', '[id^=star-]', function () {

        $('[id^=star-]').html('<span class="star star-empty"></span>');

    }).on('mouseleave', '[id^=star-]', function () {

       $('[id^=star-]').html('<span class="star star-full"></span>');

   });
});

请在这里查看JSFiddle.只需将鼠标悬停在星形图标上即可看到我的意思.

我有以下问题：在 Mozilla Firefox 中，每当我将a悬停dropdown 在表格内时，它都会触发mouseleave表格事件，尽管鼠标光标仍在表格内。在 Chrome 或 Edge 中没有这样的问题。

这是我的带有示例数据的代码：

演示

我有一个表格，当鼠标光标进入表格时，最后一行出现。当鼠标离开 - 行隐藏。只有当我离开桌子时，该行才应该隐藏

是否有某种方法或解决方法可以防止发生不必要的 mouseleave 事件？

我有一个类似菜单的下拉容器,通过绑定"mouseleave"事件来隐藏.

<div id="container">
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
</div>

我遇到的问题是我的容器的子元素包含一个SELECT对象,其中SELECT的OPTIONS物理地扩展到容器的边界之外.因此,将鼠标悬停在边界之外的OPTIONS上会触发"mouseleave"事件以触发并关闭我的下拉.SELECT是容器的子代,所以在这种情况下,我希望mouseleave事件能够识别它.

hoverintent插件与我需要的相反.我有一个由.trigger触发的.popup,当我将它悬停时,我希望.popup不会淡出几秒钟,但如果我将其悬停,然后再次悬停,则取消将要发生的淡出并保持.popup打开.

有谁知道我会怎么做？

这不起作用,但这是一个想法:

 $('.trigger').hover(function(){
        $('.popup').fadeIn(600)
    }, function() {
        $('.popup').delay(2000, function(){
            if ($(this).blur() = true) {
                $('.popup').fadeOut(600)
            }
        });
    })

似乎mouseenter/mouseleave方法不仅在鼠标的坐标进入目标的客户端矩形时触发,而且在另一个元素发现或覆盖目标时触发.这是一个问题,因为在我的mouseenter回调中,我想在目标顶部显示另一个元素E. 我也希望E在mouseleave上消失.您可以将此视为重叠的工具提示.

但是,当我将鼠标移动到目标上时,会触发mouseenter,元素E将覆盖它.此覆盖范围进一步触发了mouseleave事件,因此E将消失.这进一步触发了mouseenter事件,因此E将再次出现.....这是一个非常令人头痛的问题.

所以基本上,我想知道是否有一个版本的mouseenter/mouseleave只关心鼠标是否进入或离开目标的客户端矩形,无论目标是否被覆盖.

更新:@arunopjohny创建了一个JS小提琴来说明这个问题.看评论

标准mouseout事件的一个问题是,它不仅在光标离开由元素的外部边界限定的屏幕区域时触发,而且当光标悬停在该周边内包含的某个其他元素上时触发.

jQuery mouseleave事件的基本原理是仅在光标离开由元素外部边界限定的区域时发出信号.

不幸的是,这似乎只有在"阻碍"元素是"受阻"元素的后代时才有效.如果"阻碍"元素是通过绝对定位的位置,那么当鼠标悬停在它上面时,mouseleave"阻塞"元素上的事件将被触发.

例如,使用以下HTML:

<div id="b-div">
    <div id="d-div"><span>d</span></div>
</div>
<div id="c-div"><span>c</span></div>

... #d-div是一个真正的后代#b-div,而#c-div不是,但是,但我们可以设计它,使它"阻碍" #b-div所有相同.这在这个 jsFiddle中有说明.

如果现在定义以下事件#b-div:

$( '#b-div' ).bind( {
    mouseenter: function () {
        $( this ).addClass( 'outlined' );
    },
    mouseleave: function () {
        $( this ).removeClass( 'outlined' );
    }
} );

...然后将鼠标悬停在#b-div外围周围会导致在此周边出现蓝色轮廓,除非鼠标结束#c-div.

有没有办法让具有相同的效果#b-div,并#c-div为mouseleave与实现#b-div和#d-div？

编辑:我已经修复了jsFiddle中显示的示例.该示例的原始版本显示了不具代表性的特殊情况,其中所有阻碍元素与受阻元素重叠.在这种特殊情况下,可以通过在阻碍元件和阻塞元件上定义相同的事件来模拟期望的效果,因此,实际上,将阻碍元件转变为阻塞元件的补片.当阻碍元件未完全包含在受阻元件的外周边内时,这将不起作用(如修正后的jsFiddle所示).更一般地,基于在 …

我修改了另一个问题的最佳答案的代码（旨在检测鼠标从哪一侧进入a div），以使其检测鼠标从哪一侧离开a div。

这是我的代码。我更改了日志以显示在控制台中。但不知何故，结果总是“右”或“下”而没有“上”或“左”。

请问有什么建议吗？