在鼠标按下期间获取鼠标位置？

Question

当鼠标按钮按下时，如何持续获取鼠标位置？

我知道可以这样做：

<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>

我知道可以使用onmousedown事件，但是当按钮仍然按下时，如何连续获取位置呢？

奇怪的是我在任何我查找的地方都没有找到这个答案。

- Max Hudson

---

“continuous”是什么意思？尝试使用“onmouseover”。 - VisioN

当鼠标移动时，我想要持续更新位置，但我希望鼠标被点击而不是悬停在元素上。 - Max Hudson

Answer 1

无论如何，我建议使用mousemove事件，并检查which事件属性是否等于1（即左鼠标按钮按下）：

$("element").on("mousemove", function(e) {
    if (e.which == 1) {
        console.log(e.pageX + " / " + e.pageY);
    }
});​

示例: http://jsfiddle.net/HBZBQ/

- VisioN

---

e.which == 1真是太聪明了，我为什么没想到呢！ - Bojangles

简洁的解决方案！！ - Sean Liu

Answer 2

这里有一个 JSFiddle。你需要将鼠标按钮的状态存储在变量中。

jQuery：

$(document).ready(function() {
    $(document).mousedown(function() {
        $(this).data('mousedown', true);
    });
    $(document).mouseup(function() {
        $(this).data('mousedown', false);
    });

    $(document).mousemove(function(e) {
        if($(this).data('mousedown')) {
            $('body').text('X: ' + e.pageX + ', Y: ' + e.pageY);
        }
    });
});​

在这里，我使用$(document).data()将鼠标按键的状态存储在document中。我也可以使用全局变量，但是用这种方式存储可以使代码更加简洁。

在你的$.mousemove()函数中，只有当鼠标按下时才执行你想要的操作。在上面的代码中，我只是打印了鼠标的位置。

- Bojangles

---

不错！在IE中，被接受的答案会在鼠标悬停时改变值，而无需按下鼠标事件。这个代码在我尝试的每个浏览器中都能正常工作！谢谢！ - pmrotule