Question

当用户连续按住鼠标按钮时，我想要用户鼠标位置？

我尝试使用以下代码：

$(div).mousedown(function(eventObj){
    console.log(eventObj.clientX);  
});

但是当用户按下鼠标按钮时，此代码仅给出鼠标位置一次。

Answer 1

例如，您可以使用setInterval函数在鼠标按钮关闭时重复调用函数，然后在鼠标按钮为时使用clearInterval停止释放。这是一个例子（使用jQuery）：

var interval;
$("#div").mousedown(function(eventObj) {
    interval = setInterval(performWhileMouseDown(eventObj), 100);
}).mouseup(function() {
    clearInterval(interval);  
});
function performWhileMouseDown(eventObj) {
    console.log(eventObj.clientX);
}

Answer 2

您可以使用mousedown和mouseup设置标记 - 也许isMouseDown，然后您可以将clientX和clientY与您需要的信息一起使用

Answer 3

您可能正在寻找onMouseMove事件。你应该做的是onMouseDown开始用你想做的事情听onMouseMove事件，然后onMouseUp停止听。示例代码如下所示：

$(div).mousedown(function(eventObj){
    $(div).mousemove(function(evt){
        console.log(''+evt.pageX+', '+evt.pageY);
    });  
});
$(div).mouseup(function(eventObj){
    $(div).off( "mousemove" );
});

Answer 4

这是一种模拟mousedrag事件的方法。基本上，在mouseDown上，isDragging布尔值设置为true，然后在mouseMove中检查是否isDragging，如果是，则执行某些操作。在mouseUp上，我将isDragging设置为false。我找到的最简单方法。

var isDragging = false;
/***
 * Tracking the dragging -- on mousedown, I set
 *   the isDragging to true, then I check that for
 *   the mousemove on this element.
 *   - On mouseup, I reset the isDragging to false,
 *     thus ending the simulated drag event.
 ***/
$(".slide-control").on("mousemove", function(evt) {
  if (isDragging) {
    console.log(evt.pageX+", "+evt.pageY);
  }
}).on("mouseup", function() {
  // When the drag event has ended, set the toggle off.
  isDragging = false;
}).on("mousedown", function() {
  isDragging = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-control"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.</p>

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus.</p></div>

另一个选项，即球赛的后期，是创建自己的自定义赛事。这将允许您实际使用类似的东西： $（“。my-custom-el”）。on（“mousedrag”，function（）{...}）;

要执行此操作，只需为此自定义事件定义触发器，如下所示：

/****
 * Here I'm using the custom event I've created.
 *   As there are multiple elements side-by-side, 
 *   depending on which event triggers causes a
 *   different result. Change the downEvt to the
 *   dragEvt in the following function to see what
 *   happens.
 ****/
$(".sub-pane").on("mousedrag", function(evt){
  console.log($(this).prop("id")+", dragging");
});


/*****
 * This function is a custom event, could be placed
 *  in a utility library someplace. It simply listens
 *  at the document level for a combination of mouse
 *  down and mouse move, and when that occurs, it
 *  triggers a mousedrag event. Now, the event target
 *  used to trigger the event can be either the 
 *  mousedown element OR the mousemove element. 
 *  - Using the downEvt.target to trigger the event
 *    will continue to trigger the event ONLY on its
 *    starting element, even if you drag over another
 *    element.
 *  - using the dragEvt.target to trigger will 
 *    use the element you're currently over as the
 *    triggered element.
 *****/
$(document).on("mousedown", function(downEvt){
  $(document).on("mousemove", function(moveEvt){
    return $(downEvt.target).trigger("mousedrag");
  });
});

.nav-pane {
  width: 15%;
  background-color: #ccc;
  float: left;
}
.content-pane {
  width: 80%;
  background-color: #aaa;
  float: right;
  padding: 5px;
}
.nav-pane ul {
  list-style-type: none;
  position: relative;
  left: -25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div id="pane-one" class="sub-pane nav-pane">
    <ul>
      <li>first</li>
      <li>second</li>
      <li>third</li>
    </ul>
  </div>
  <div id="pane-two" class="sub-pane content-pane">
    <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed,
      convallis at tellus.</p>

    <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet
      et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit.</p>
  </div>
</div>

Answer 5

实现此目的的最简单方法是将mousemove事件放入mousedown事件中，以便当mousedown事件触发持续触发的mousemove事件时也会触发。这样可以在按住鼠标按钮时跟踪鼠标位置。添加了mouseup事件，以便在发布时它停止跟踪mousemove事件中的鼠标位置。

https://jsfiddle.net/q37z3g94/

$(

"#test").mousedown(function(eventObj) {
  $("#test").mousemove(function(event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
    $("span:last").text("( event.clientX, event.clientY ) : " + clientCoords);
  });
});

$("#test").mouseup(function(eventObj) {
  $("#test").unbind('mousemove');
});


"#test").mousedown(function(eventObj) {
  $("#test").mousemove(function(event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
    $("span:last").text("( event.clientX, event.clientY ) : " + clientCoords);
  });
});

$("#test").mouseup(function(eventObj) {
  $("#test").unbind('mousemove');
});

onmousedown事件不是连续事件？

5 个答案: