Javascript/JQuery 放置事件未在 Internet Explorer IE 11 中触发

Question

我正在将图像从不同的浏览器选项卡拖放到我的网页的选项卡中。 我的“drop”事件的事件处理程序在除 Internet Explorer 11 之外的所有其他桌面浏览器中都有效。

IE 只是导航到我放置的图像的 URL，而不是触发“放置”事件并让我的 JS 代码用它做它想做的事（就像在 Windows 7 上的 Chrome、Firefox、Opera 和 Safari 中发生的那样）。 代码如下。 请注意，代码中列出的警报均未触发。

我什至遵循了 Microsoft 页面上给出的建议：https ://msdn.microsoft.com/en-us/library/ms536929(v=vs.85).aspx 关于取消“dragenter”和“specifying window.event.returnValue=false ”的默认操作window.event.returnValue=false在ondragenter和ondragover事件处理程序中”（注意：其他浏览器不要求我有 dragenter 事件处理程序）

$(window).on("dragenter", function(event) {
    alert('drag enter');
    event.returnValue = false;
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("dragover", function(event) {
    alert('drag over');
    event.returnValue = false;
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("dragleave", function(event) {
    alert('drag leave');
    event.preventDefault();  
    event.stopPropagation();
});

$(window).on("drop", function(event) {
    alert('drop');
    event.preventDefault();  
    event.stopPropagation();
    var imageSrc = $(event.originalEvent.dataTransfer.getData('text/html'))
            .filter(function(i, elm){return $(elm).is('img');}).attr('src');

// Now do something with the imageSrc URL:

});

非常感谢您的任何建议！

Answer 1

It is working fine in IE Browser Version:11.0.40 for jQuery 2.2.4 version.
Please check your jQuery version    

Note: for me event has been fired for two times when dragging image from desktop to IE 11 browser.

请找到演示链接。

Answer 2

编辑：有趣的是我在这里得到了什么（所以问题/答案） ，他们在同一域的两个 Internet Explorer 11 窗口之间拖动时遇到了类似的问题。 所以还有一个原因，如果它们来自不同的域。 他引用：

到目前为止，我知道这将适用于版本至少为 1607 的 Windows 10 MS 浏览器

---

首先，这绝不是要回答这个问题，它只是作为一组可能有助于为这个令人费解的问题建立最终答案的要点

两种情况

1. 在同一个域

   当两个页面都在localhost上进行测试时，这些事件已正常触发：您必须将getData('text/html')更改为getData('text')因为IE 仅支持'URL'或文件，因此您需要设置相应地从原始页面设置数据setData()
   （通常，如果拖动的标记是没有任何链接的图像，则getData('text')会为您提供图像的属性src就可以了）

2. 在不同的领域

   这是这不是一个很好的答案的部分，已经尝试了以下几点并在此处给出以供重新测试，调整或扩展以找到解决方案。 作为最后一个想法，我首先把它放在这里：可能这是不可能的，因为你可能已经知道，拖动的标记可以有内联脚本，使目标容易受到 XSS 攻击。 黑客试图让它发生（大致就像我做的那样）并且每次微软都抵消它并不是不太可能。

   • 正如原始海报所指出的，使用returnValue=false是毫无意义的。 我已经在原始事件event.originalEvent上尝试过它，并将event作为window的事件和handler参数。

   • 您可能会认为，因为我已经提到了域，所以这是一个跨域问题（非常合法），这是我在 PHP 中尝试过的：

   header("Access-Control-Allow-Origin: *");

   • 在 IE 因容易受到 XSS 攻击而为人所知之后，它可能在 IE 11 中对其采取了严厉的措施，因此恢复到以前版本的行为，例如 IE9：

   header('X-UA-Compatible: IE=EmulateIE9');
header('X-UA-Compatible: IE=9');

注意以下几点并不是一个可行的解决方案（至少不是从开发人员的角度来看）它是试图缩小问题起源的可能性

• 您可能想尝试 Internet Explorer 的：

  internet options>Custom level...-->miscellaneous--> under the label 'allow the dragging of content between separate windows' --> check enable

或高级用户的 Internet Explorer 安全区域注册表项或使用此参考

请注意，出于测试目的，您可以在 IE 和 Firefox/Chrome 之间来回跨域拖动， DataTransfer的行为大致与同一域中两个 IE 之间的行为相同。