按住按钮时如何连续获取鼠标的位置?
我知道我可以做到:
<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>
而且我知道您可以使用 onmousedown 事件,但是在仍然按住按钮的同时如何连续获取位置?
奇怪的是,我在任何地方都找不到这个。
按住按钮时如何连续获取鼠标的位置?
我知道我可以做到:
<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>
而且我知道您可以使用 onmousedown 事件,但是在仍然按住按钮的同时如何连续获取位置?
奇怪的是,我在任何地方都找不到这个。
无论如何,我建议使用mousemove
事件并检查which
事件属性是否等于1
(即按下鼠标左键):
$("element").on("mousemove", function(e) {
if (e.which == 1) {
console.log(e.pageX + " / " + e.pageY);
}
});
演示:http: //jsfiddle.net/HBZBQ/
这是给你的 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
using 中$(document).data()
。我本可以使用全局变量,但以这种方式存储它会使代码更简洁。
在您的$.mousemove()
功能中,仅当鼠标按下时才执行您想要的操作。在上面的代码中,我只是打印鼠标的位置。