javascript - Mousemove事件错误的目标javascript

Question

在什么情况下可以mousemove给出不正确的目标？我有两个元素并向event.target我显示一个 div，而实际上鼠标在另一个上。

这是代码。

var o = document.getElementById('container');
var inner = document.getElementById('inner');
var ox = 100;
var oy = 100;

function onMouseDown(event) {
    if (event.stopPropagation) event.stopPropagation();
    if (event.preventDefault) event.preventDefault();
    event.cancelBubble = true;
    event.returnValue = false;
    var size = {x: o.offsetWidth, y: o.offsetHeight};
    var curX = event.pageX;
    var curY = event.pageY;
    var previousInside = event.target === inner;

    function onMouseMove(event) {
        var x = event.pageX;
        var y = event.pageY;
        var dx = x - curX;
        var dy = y - curY;

        var p1 = {x: ox, y: oy};
        var p2 = {x: ox + 50, y: oy + 50};
        p1.x += dx;
        p2.x += dx;
        p1.y += dy;
        p2.y += dy;
        var currentInside = event.target === inner;
        console.log('Was '+ (previousInside? 'inside': 'outside'), 'Now ' + (currentInside?'inside': 'outside'))
        if (p1.x < 40 || p2.x > size.x - 40 || p1.y < 40 || p2.y > size.y - 40) {
            if (currentInside) {
                curX = x;
                curY = y;

            }
            previousInside = currentInside;
            return;

        } else {
            if (currentInside && !previousInside) {
                curX = x;
                curY = y;
                previousInside = currentInside;
                return;
            }

        }
        previousInside = currentInside;
        curX = x;
        curY = y;
        ox = p1.x;
        oy = p1.y;
        inner.style.top = oy +'px';
        inner.style.left = ox+'px';
        return false
    }

    o.addEventListener("mousemove", onMouseMove);
    o.addEventListener("mouseup", function () {
        o.removeEventListener('mousemove', onMouseMove);
    });
}
o.addEventListener("mousedown", onMouseDown);

<div id="container" style="position: relative; width: 50%; height: 250px; background-color: yellow;">
  <div id="inner" style="position:absolute; width: 50px; height:50px; background-color: red; top:100px; left: 100px">
  </div>
</div>

要查看奇怪的行为，请将鼠标放在红色方块上并拖动它直到它停止移动。再往上拖一点，这样你就离红色方块足够远了。现在从广场向右拖动。现在向下拖动，当mouseX 等于红色框x 时，控制台将显示Was outside 和Now insinde，而实际上它应该是Was outside 和Now inside。

谢谢你。

标签： javascript