javascript - 即 10 : dragstart event doesn't get fired if <img> is wrapped by <a>

Question

jsFiddle:http://jsfiddle.net/39she/3/

HTML:

<a href="http://google.de">
  <img src="https://www.google.de/images/srpr/logo4w.png" draggable="true" />
</a>

JavaScript:

// Please forgive me this bad-designed function ;)
// quick and dirty solution
function log(msg) {
    document.body.innerHTML = document.body.innerHTML + "<hr />" + msg;
}

var myImg = document.getElementsByTagName("img")[0];

myImg.addEventListener("dragstart", function(evt) {
    log("Drag started");
});

日志消息出现在 Chrome 27、Safari 5.1 和 Opera 12.15 中。只有 IE 10 不会触发任何事件(尽管它会在之后放下图像时触发 drop 事件)。

编辑1
在链接标签处监听 dragstart 在 IE 10 中工作正常。

Answer 1

我相信您必须取消初始文本选择事件并激活拖动功能才能使其工作。

编辑 1:

var output = document.querySelector('#message')
, myImg = document.querySelector("#test")

function log(msg) {
  output.innerHTML = msg + ' ' + (+new Date());
}

myImg.addEventListener('selectstart', function (evt) {          
  evt.preventDefault && evt.preventDefault();
  this.dragDrop && this.dragDrop();  //activates DnD for IE  
  return false;
});

myImg.addEventListener('dragstart', function (evt) { 
  log('started');
});

myImg.addEventListener('dragend', function (evt) { 
  log('ended');
});

祝你好运!

注意: 看来 IE 默认将具有 href 属性的标签视为可拖动的。但是当你删除 href 属性时，它工作得很好。其实很有趣。 codepen.io/snypelife/pen/hImer