javascript - onMouseMove + onMouseDown 调用函数

Question

我这里有一个真正的问题。我希望仅当单击对象以及将鼠标移到对象上时才调用函数。这是一个示例(忽略奇怪的语法)以帮助您理解:

<div onMouseMove+onMouseDown="function()" ... ></div>

我正在想一个办法来解决这个问题。如果我创建一个 onMouseDown 来触发一个函数，该函数将更改我的 onMouseMove 函数的名称，并使用“填充”或“替代”函数，会怎么样？让我解释一下:

<div id="object" onMouseMove="substituteFiller()" onMouseDown="nameChanger()" ... ></div>
<script>
    function nameChanger(){
        document.getElementById("object").onMouseMove = "theRealFunction()"; 
    }
</script>
<script>
    function theRealFunction() ... 

当我将鼠标移到对象上时，什么也不会发生，因为函数 substituteFiller() 不起作用。但是，当鼠标单击对象时，onMouseMove 函数将是正确的，theRealFunction() 和 theRealFunction() 将现在当鼠标移动时被调用。

这样我就可以仅在单击对象和移动鼠标时激活/调用theRealFunction()。然而，它不起作用。

需要明确的是:如何更改正在调用的函数的名称？如何使函数仅在单击对象并移动鼠标时调用？

谨致问候，希望您能理解!如果没有，评论我猜!

Answer 1

好的，您需要做的就是分别注册 3 个事件处理程序:

1. 鼠标按下
2. 鼠标悬停
3. 鼠标移动

当鼠标向下和向上时，您将有一个 bool 标志分别切换为 true 和 false。然后，在鼠标移动处理程序上，您需要检查该标志是否为 true，这意味着鼠标按钮已按下。最后，我们检查光标是否实际上已从其初始位置移动。

这是JSFiddle .

var example = document.getElementById("example");
var position = {
  X: 0,
  Y: 0
};

example.onmousedown = function (down) {
  downFlag = true;
  // Record click position
  position.X = down.clientX;
  position.Y = down.clientY;
};

example.onmouseup = function (up) {
  downFlag = false;
};

example.onmousemove = function (move) {
  if (downFlag) {
    if (position.X !== move.clientX || position.Y !== move.clientY) {
      // Do stuff here
    }
  }
};