Question

我正在试图找出一种方法来了解鼠标指针所在的位置（例如，在我完成鼠标移动和超时之后）。

有没有简单的方法来获得这个？

我已经完成了一个关于我的代码看起来如何的jsfiddle： https://jsfiddle.net/0Lwxhh8r/

HTML

<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div id="tooltip"></div>

CSS

.showTooltip {
height: 70px;
width: 50px;
border: 1px solid #000;
display: inline-block;
margin: 0px 10px;
}
#tooltip {
position: fixed;
width: 400px;
height: 240px;
border: 1px solid #000;
display: none;
}

JS

$(document).on({
mouseenter: function (e) {
        $("#tooltip").show();
},
mouseleave: function (e) {
setTimeout(function() {
    alert("Where is mousepointer?");
    $("#tooltip").hide();
}, 500)
}
}, ".showTooltip");

所以我想知道，如果在超时后，鼠标指针在另一个.showTooltip，＃tooltip或者只是某个地方。

Answer 1

基于@ freedomn-m的“延迟隐藏”理论是正确的，你可以写：

var timeoutRef = null;

$(document).on({
    mouseenter: function(e) {
        clearTimeout(timeoutRef);
        $("#tooltip").show();
    },
    mouseleave: function (e) {
        timeoutRef = setTimeout(function() {
            $("#tooltip").hide();
        }, 500);
    }
}, ".showTooltip");

或者，可以通过将超时引用存储为data元素的#tooltip属性来避免丑陋的外部变量。

$(document).on({
    mouseenter: function(e) {
        clearTimeout($("#tooltip").show().data('timoutRef'));
    },
    mouseleave: function (e) {
        var $tooltip = $("#tooltip").data('timoutRef', setTimeout(function() {
            $tooltip.hide();
        }, 500));
    }
}, ".showTooltip");

jquery - 超时后Mouseleave，指针在哪里

1 个答案: