IE 10：如果< img&gt ;,则不会触发dragstart事件由< a>包裹 [英] IE 10: dragstart event doesn't get fired if <img> is wrapped by <a>

问题描述

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

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：

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 事件。）

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).

编辑1

在IE 10中，在链接标记上收听 dragstart 可以正常工作。

推荐答案

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

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

编辑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

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

这篇关于IE 10：如果< img&gt ;,则不会触发dragstart事件由< a>包裹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！