为什么在dragstart事件中使用event.preventDefault()会中断后续的拖动事件执行？

Question

我想拖动一个图片，为了阻止浏览器默认的图片拖动，我使用了event.preventDefault()。但是由于某些原因，它会中断后续的拖动事件，如dragenter、dragover、dragend等的执行。这是为什么？我该如何在不中断正常拖动事件的情况下停止浏览器的默认函数。

<img src="/img/image1" id="img1"/>

jQuery

var obj=$('#ironman');  
obj.on('dragstart', function (e) {
      //e.preventDefault();
      console.log("dragstart");
  });

  obj.on('dragenter', function (e) {
      console.log("dragenter");
  });

  obj.on('dragover', function () {
      console.log("dragover");
  });
  obj.on('dragleave', function () {
      console.log("dragleave");
  });

  obj.on('dragend', function () {
      console.log("dragend");
  });

JSfiddle

- Lokesh Suthar

---

那你为什么要防止它呢？dragstart的默认行为就是拖动。你想停止哪个“默认函数”？ - Bergi

@Bergi，我想在图像上创建注释。但是浏览器的默认行为妨碍了这一点。我知道一个解决方法（使用图像作为背景），但我不想使用它。 - Lokesh Suthar

创建图像注释时，为什么需要拖动？难道不能使用经典的mousedown/move/up事件吗？ - Bergi

是的，我意识到了我的错误。谢谢。 - Lokesh Suthar

Answer 1

这是一个棘手的问题，因为您正在停止元素上的本地拖动事件。不确定您为什么要这样做，但实现本地拖动的一种方法是取消它并处理鼠标事件。

var obj=$('#ironman');  
obj.on('mousedown', function (e) {
  console.log("mousedown");
  // bind to the mousemove event
  obj.on('mousemove', function (e) {
      console.log("mousemove");
  });
});

obj.on('mouseup', function (e) {
  console.log("mouseup");
  // unbind the mousemove event
  obj.unbind('mousemove');
});
obj.on('dragstart', function (e) {
  e.preventDefault();  // cancel the native drag event chain
  console.log("dragstart");
});

- cbayram

---

谢谢，我想要在图像上创建注释。但是浏览器的默认行为妨碍了这一点。我知道一个解决方法（使用图像作为背景），但我不想使用它。 - Lokesh Suthar