javascript - 拖动 anchor 绑定(bind) ‘mousedowd, mousemove, mouseup’时如何防止重定向？

Question

我正在尝试实现一个可拖动的图像。

但是<img>被 <a> 包裹

<a href="http://somewhere.com">
  <img src="someone.png"/>
</a>

我在 anchor 上绑定(bind)“mousedown、mousemove、mouseup”来实现拖拽。但是当'mouseup'时，它会重定向。

如果被拖动如何防止重定向？

附注我尝试将 event.preventDefault() 添加到 mouseup 处理程序中，但它不起作用。

详细代码:

$('.item').on('mousedown', function (e) {
    // if not using preventDefault(), image won't move when 'mousemove'
    e.preventDefault();

    $('.item').on('mousedown', function (e) {
        // update 'left' and 'top'
    });
});

$('.item').on('mouseup', function () {

    // still redirect !?!?
    return false
});

Answer 1

preventDefault 阻止可拖动图像上鼠标松开的默认事件，但该事件随后会传播到封闭的 标记，该标记具有自己的默认行为。您需要停止事件传播，以便在拖放时事件不会发送到链接。编辑:正如 TrueBlueAussie 在评论中提到的，触发链接的是 click 事件。这是必须阻止到达链接的事件。

event.stopPropagation();

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation