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

问题

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");
});

The log message appears in Chrome 27, Safari 5.1 and Opera 12.15. Only IE 10 does not fire any event (though it fires the drop event when the image gets dropped afterwards).

Edit 1
Listening for dragstart at the link tag works fine in IE 10.

回答1:

I believe you have to cancel the initial text selection event as well as activate the drag functionality for it to work.

EDIT 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');
});

Best of luck!

Note : It appears it's that IE treats tags with href attributes as draggable by default. But when you remove the href property, it works just fine. Quite interesting actually. codepen.io/snypelife/pen/hImer

来源：https://stackoverflow.com/questions/16750180/ie-10-dragstart-event-doesnt-get-fired-if-img-is-wrapped-by-a