jQuery mousedown 没有更新

Question

我有 this 我一直在搞乱：

$('.container').mousedown(function(e) {
    $('.coords').text(e.pageX + ' : ' + e.pageY);
});

.container {
    width: 300px;
    height: 300px;
    background-color: white;
    border: 2px solid black;
    margin: 0 auto;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
</div>
<div>Coords: <p class='coords'> </p> </div>

我正在尝试对其进行编程，以便当您在框内单击并在坐标周围移动鼠标时，坐标也会发生变化——然后如果您离开框，它就不会更新。现在，坐标只会在您松开鼠标按钮然后再次单击时发生变化。有帮助吗？

Answer 1

您需要创建的不仅仅是 mousedown 函数。您还需要使用 mousemove。这是相关文档，https://api.jquery.com/mousemove/

你可以这样做 (fiddle)。

var mouse_clicked;

$('.container').mousedown(function(e) {
    mouse_clicked = true;
});

$('.container').mouseup(function(e) {
    mouse_clicked = false;
});

$('.container').mouseleave(function(e) {
    mouse_clicked = false;
});

$('.container').mousemove(function(e) {
  if (mouse_clicked) {
    $('.coords').text(e.pageX + ' : ' + e.pageY);
  }
});

这是一种看起来更干净的不同方法

var mouse_clicked;
$('.container').on({
  'mousedown': function() {
    mouse_clicked = true;
  },
  'mouseup': function() {
    mouse_clicked = false;
  },
  'mouseleave': function() {
    mouse_clicked = false;
  },
  'mousemove': function(e) {
    if (mouse_clicked) {
      $('.coords').text(e.pageX + ' : ' + e.pageY);
    }
  }
});

Answer 2

一种简单的方法是使用一个开关来检测鼠标何时被按下。此示例适用于文档，但可以很容易地适用于元素：

var isDown = false;
$(document).mousedown(function(e) {
   isDown = true;
});

$(document).mousemove(function(e) {
    if(isDown) {
        console.log(e.pageX + ',' + e.pageY);
    }
});

$(document).mouseup(function(e) {
   isDown = false;
});

http://jsfiddle.net/kynwywss/1/

Answer 3

我会这样跟踪它。

var mousePosition = { x: 0, y: 0};
var BUTTONS = { LEFT: 0, MIDDLE: 1, RIGHT: 2};
var mouseDown = [];
var mouseDownCount = 0;

var buttonInfo = document.getElementById("buttons");
var posInfo = document.getElementById("pos");

// Track mouse all the time.
document.addEventListener('mousemove', function storeMouse(event) {
    mousePosition = {
        x: event.clientX,
        y: event.clientY
    };
});

document.addEventListener('mousedown', function (event) {
    mouseDown[event.button] = true;
    ++mouseDownCount;
});
document.addEventListener('mouseup', function (event) {
    mouseDown[event.button] = false;
    --mouseDownCount;
});

function checkMouseStuff() {
    var buttons = [];

    if (mouseDownCount) {
        for (var i = 0; i < mouseDown.length; ++i) {
            if (mouseDown[i]) {
                buttons.push("Button: " + i);
            }
        }
    }

    buttonInfo.textContent = buttons.join(", ");
    posInfo.textContent = mousePosition.x + " : " + mousePosition.y;
}

window.setInterval(checkMouseStuff, 10);

<p id="pos"></p>
<p id="buttons"></p>

jQuery mousedown 没有更新

jQuery mousedown not updating

jquery

mousedown