onMouseMove + onMouseDown 调用函数

Question

我这里有一个真正的问题。我希望仅在单击对象时以及鼠标移到对象上时才调用函数。这是一个（语法迟钝的）示例来帮助您理解：

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

我正在想办法解决这个问题。如果我创建一个 onMouseDown 触发一个函数，该函数将更改我的 onMouseMove - 函数的名称，并使用 "filler" 或 "substitute" 函数怎么办？让我解释一下：

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

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

这样我可以 activate/call theRealFunction() 只有当对象被点击和鼠标移动时。但是，它不起作用。

明确一点：如何更改正在调用的函数的名称？如何使一个函数仅在单击对象和移动鼠标时调用？

此致，希望您理解！如果没有，我猜是评论！

Answer 1

它是我的一个网页的一部分..检查它 out.May 这会对你有所帮助..

<div id="Log_frm">
<fieldset id="fld_1">
    <!--<legend>Log In</legend>-->        
    <div id="log_l" onmouseover="dv_in();" onmouseout="dv_out();" style="background-color:#0C93D4;font-size: 15px;height: 30px;padding: 7px 32px 0px 32px;font-weight:bold; float: left;-webkit-border-top-left-radius: 5px;">
        <a  href="#" onclick="">Log In</a>
    </div>
    <div id="log_r" onmouseover="dv_out();" onmouseout="dv_in();"style="background-color: #0C93D4;font-size: 15px;font-weight:bold; float: right;height: 30px;padding: 7px 14px 0px 12px;-webkit-border-top-right-radius: 5px;">
        <a  href="#">Need Any Help</a>
    </div >   
    </fieldset>
</div>

<style>
#Log_frm {
    width: 250px;
    height: 60px;
    margin-top: 10px;
    position: absolute;
    font-size: 12px;
    float: right;
    right: 0px;
}

#Log_frm a {
    color: #fff;
    text-decoration: underline !important;
    left: auto;
    margin-right: auto;

}

<script type="text/javascript">
        function dv_in() {  
            log_l.style.backgroundColor="#06C"; 
            log_r.style.backgroundColor="#0C93D4"; 
        }
        function dv_out() {  
            log_l.style.backgroundColor="#0C93D4"; 
            log_r.style.backgroundColor="#06C";
        }


</script>

注册..

Answer 2

好了，你只需要分别注册3个事件处理器：

鼠标按下
鼠标弹起
鼠标移动

您将在鼠标按下 和向上时分别将布尔标志切换为真和假。然后，在 mouse move 处理程序上，您需要检查标志是否为真，这意味着鼠标按钮已按下。最后，我们检查光标是否真的从它的初始位置移动了。

这是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
    }
  }
};

onMouseMove + onMouseDown 调用函数

onMouseMove + onMouseDown to call function

javascript

onclick

substitution

onmousedown

onmousemove