Question

当光标不在元素本身的顶部时，有没有办法获取mousemove事件？

这就是我目前所拥有的：

$(document).on('mousemove', '.className', OnMouseMove);

function OnMouseMove(e) {
    var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
    var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
    var offsetCoords = "( " + e.offsetX + ", " + e.offsetY + " )";

    console.log('clientCoords: '+clientCoords+', pageCoords: '+pageCoords+', offsetCoords: '+offsetCoords);
}

我有很多使用.className的元素，我将添加动画，但即使光标不在元素的顶部，我也需要鼠标坐标。我怎么能这样做？

Answer 1

$(document).on('mousemove', OnMouseMove);

这将根据文档为您提供事件。这是获得它的唯一方法，无论它在哪里。然后，您可以检查它是否在特定元素上，也可以将鼠标悬停在.classname元素上以切换booleaen或其他内容。

喜欢

var isOverElement = false;
$(document).on('mouseenter', '.classname', function(e){
    isOverElement = true;
}).on('mouseleave', '.classname', function(e){
    isOverElement = false;
});

HTH， -Ted

编辑以添加评论请求的其他代码示例...

要向 cachedElems 数组添加元素，您需要向将其添加到页面的任何代码添加一些代码，或者重新定义数组。

数组需要全局声明，或者至少在每个函数可以访问它的上下文中。

如

<script>
var cachedElems;

$(document).ready(....

然后在添加元素的任何函数中，或者在加载完成时加载包含这些元素的页面，定义数组，如：

cachedElems = $('.className');

Answer 2

只需迭代鼠标移动功能中的元素。

$(function(){

    $(document).on( "mousemove", MouseMove );

    var cachedElems = $( '.tracker' );

    function MouseMove(e){
        var pageX = e.pageX,
            pageY = e.pageY;

        $.each(cachedElems, function(i,elem){
            elem = $(elem);

            var elemX = pageX - elem.offset().left,
                elemY = pageY - elem.offset().top;

            $(elem).text(
                'page x: ' + pageX + '\n' +
                'page y: ' + pageY + '\n' +
                '\n' +
                'elem x: ' + elemX + '\n' +
                'elem y: ' + elemY + '\n'
            );

        });
    }

});

http://jsfiddle.net/f1Lzqxom/

即使光标不在它们之上，.classname元素也需要mousemove事件。如何获取元素事件？

2 个答案: