我想让用户在连续按住鼠标按钮时保持鼠标位置？
我尝试使用以下代码进行操作：
$(div).mousedown(function(eventObj){
console.log(eventObj.clientX);
});
但是，当用户按下鼠标按钮时，此代码仅提供一次鼠标位置。
例如，可以使用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);
}
实现此目的的最简单方法是将 mousemove 事件放入 mousedown 事件中，以便在鼠标按下事件触发时，也会触发连续触发的 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');
});
您可以使用鼠标向下和鼠标向上设置标志 - 也许是isMouseDown，然后您可以在需要的地方将clientX和clientY与该信息一起使用
您可能正在寻找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" );
});
这是一种模拟鼠标拖动事件的方法。基本上，在鼠标向下时，isDragging 布尔值设置为 true，然后在 mouseMove 中，我检查是否正在拖动，如果是，则执行某些操作。在mouseUp上，我将isDraging设置回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>