拖动时获取鼠标位置（JS + HTML5）答案

【问题标题】：Getting mouse position while dragging (JS + HTML5)拖动时获取鼠标位置（JS + HTML5）
【发布时间】：2011-04-27 00:55:42
【问题描述】：

我目前正在实现一个小型演示应用程序，试图让我的头脑了解使用 HTML5 进行拖放。我目前正在尝试做的是在用户拖动时获取光标的位置，但是我遇到了一些问题。

拖动时似乎没有触发“mousemove”事件，这使我无法确定鼠标的当前位置。我可以使用“拖动”事件，但是我不知道如何从“拖动”事件对象中获取位置。

【问题讨论】：

标签： javascript html

【解决方案1】：

//  JavaScript

document.addEventListener("dragover", function(e){
    e = e || window.event;
    var dragX = e.pageX, dragY = e.pageY;

    console.log("X: "+dragX+" Y: "+dragY);
}, false);

//  jQuery

$("body").bind("dragover", function(e){
    var dragX = e.pageX, dragY = e.pageY;

    console.log("X: "+dragX+" Y: "+dragY);
});

下面的可运行代码sn-p：

//	JavaScript (a really great library that extends jQuery, check it out)

document.addEventListener("dragover", function(e){
e = e || window.event;
var dragX = e.pageX, dragY = e.pageY;

console.log("X: "+dragX+" Y: "+dragY);
}, false);

//	jQuery (the native-language JavaScript is written in)

$("body").bind("dragover", function(e){
var dragX = e.pageX, dragY = e.pageY;

console.log("X: "+dragX+" Y: "+dragY);
});

<!doctype>
<html>
  <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
  <body>LOL drag something over me (open the console)</body>
</html>

【讨论】：

dragover 事件相当多。忽略它们中的大多数不是一个好主意吗？假设.. 每 10 个事件处理一次？现在我不知道该怎么做，但我会花时间考虑一下。
@Tchypp 嗯，是的，有很多事件，指针位置更新必然会产生很多事件。这取决于您在这些活动中所做的事情以及活动的强度。大多数人需要实时信息，而不是每一个像素的更新。跟踪拖动事件的开始、为每个事件递增以及仅在第 10 个事件上采取行动的成本必须与在每个事件期间采取行动进行权衡。

【解决方案2】：

document.ondragover = function(evt) {
    evt = evt || window.event;
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);
}

jsFiddle.

如果你使用的是 jQuery...

$(document).on('dragover', function(evt) {
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);

});

【讨论】：

... = 函数（evt）{ evt = evt ||窗口.事件； ... }
@alex 那么你为什么不这样做呢？