Question

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

但是<img>包裹<a>

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

我在锚点绑定'mousedown，mousemove，mouseup'来实现draggale。但是当'mouseup'时，它会重定向。

如果拖动重定向，该怎么办？

P.S。我试图将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阻止可拖动图像上鼠标的默认事件，但事件随后传播到封闭的＆lt; a＆gt;。标签，它有自己的默认行为。您需要停止事件传播，以便在拖放的情况下不将事件发送到链接。编辑：正如TrueBlueAussie在评论中所提到的，它是触发链接的click事件。这是必须阻止其到达链接的事件。

event.stopPropagation();

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

Answer 2

有趣的问题，因为我在MouseUp事件中从未见过这个问题。我所做的只是

返回false;

来自你的mouseup处理程序的

，如下所示：

$("#anchor").on("click",function(){
  //do some mouseup stuff
  console.log("Doing mouseup stuff");
  return false;
});

这是一个小提琴：

https://jsfiddle.net/59ddut6s/3/

我认为Jacque提到的event.stopPropagation();可能是一个更好的解决方案，但它绝对不是我通常认为自己做的事情。

更新：根据评论进行微小更改。一些有用的信息值得一读。我没有考虑过这种方法会同时考虑event.stopPropogation()和event.preventDefault()，但它会有意义。

还有什么让我感到困惑的是，为什么会（＆＃34;点击＆＃34;）阻止链接导航，但不能阻止（＆＃34; mouseup＆＃34;）？

拖动锚点绑定'mousedowd，mousemove，mouseup'时如何防止重定向？

2 个答案: