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

时间:2012-07-01 13:28:57

标签: javascript jquery

如何在按住按钮的同时连续获取鼠标的位置?

我知道我能做到:

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

我知道你可以使用onmousedown事件,但是当按钮按下时我怎么能连续获得位置?

奇怪的是,在我看的任何地方都找不到。

2 个答案:

答案 0 :(得分:19)

无论如何,我建议使用mousemove事件检查which事件属性是否等于1(即按下鼠标左键):

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

DEMO: http://jsfiddle.net/HBZBQ/

答案 1 :(得分:5)

Here是一个适合你的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$(document).data()中存储鼠标按钮的向上或向下状态。我可以使用全局变量,但以这种方式存储它会使代码更清晰。

$.mousemove()功能中,只有在鼠标停止时才能执行所需操作。在上面的代码中,我只是打印鼠标的位置。