jQuery mouseleave在拖动时未正确触发

Question

我有一个带有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 + $(this).outerWidth() < $(this).parent().offset().left  ||
                $(this).offset().top + $(this).outerHeight() < $(this).parent().offset().top ){
                console.log("child is outside parent");
            }
    });

- John

---

你尝试过使用mouseout吗？ - tad

@tad - 我尝试了 - 结果相同。 - zb'

值得注意的是，如果我改为使用 document.getElementById("sortable").addEventListener("mouseout", onmouseout, false); 添加一个鼠标移出事件监听器，我会得到相同的行为。 - John

@John，你会得到相同的行为，因为在幕后这就是jQuery为你做的事情。 - Corey Sunwold

你不应该使用dragleave来实现吗？ - Tgr

@Tgr 我相信我应该使用可排序的“out”事件，但它没有按预期触发，这促使我尝试mouseleave。 - John

Answer 1

我假设你想要捕获元素从可排序区域视觉上离开的事件。如你所发现，mouseleave和mouseout不是最好的方法，因为它们跟踪鼠标相对于DOM元素的移动。由于你正在拖动这些列表项，它们实际上从未离开无序列表，因此你得不到预期的结果。

但是，下面的方法应该适用于你：

$("#sortable").sortable().disableSelection();
$("#sortable li").mousemove(function() {
    if (parseInt($(this).css("left")) > $("#sortable").width() ||
        parseInt($(this).css("top")) > $("#sortable").height()) {
        //This is when the element is out of bounds
    }
});

- Corey Sunwold

---

谢谢。我正在尝试捕获鼠标视觉上离开排序区域的事件，而不仅仅是子元素。你是说，当拖动一个子元素时，即使该子元素（和鼠标）在视觉上已经超出了父元素，但由于根据DOM，鼠标从未离开父元素，因此不应该触发mouseout事件？ - John

@John - 正确。因为你想判断它是否在父元素之外，你必须查看父元素的高度和宽度，并根据子元素的位置确定子元素是否在父元素之外。这就是我上面的代码所做的。 - Corey Sunwold

非常有趣，感谢您指出这一点！从DOM的角度来看，这确实是有逻辑意义的，但我没有想到会发生什么。我已经使用了您建议的方法，并根据我的需求进行了调整（如上所示）。 - John