如何仅在水平移动时检测鼠标移动(向左或向右移动)

时间:2016-01-06 00:03:04

标签: javascript jquery

请你看一下This Demo,让我知道当鼠标向左或向右移动时我怎么才能检测到mousemove()

基本上现在发生的是jquery检测mousemove事件,即使鼠标从上到下或从下到上移动但是我需要禁用它并在水平移动时检测鼠标移动事件。



$( "#target" ).mousemove(function( event ) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<div>" + msg + "</div>" );
});
&#13;
#target{width:500px; height:120px; background:yellow;}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  Move here
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

记录鼠标的最后位置,如果水平位置已更改,请运行代码。

var lastX = 0;

$( "#target" ).mousemove(function( event ) {
  if(lastX != event.pageX) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    $( "#log" ).append( "<div>" + msg + "</div>" );
  }
  lastX = event.pageX;
});
#target{width:500px; height:120px; background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  Move here
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>