Javascript/JQuery 丢弃事件在 Internet Explorer IE 11 中未触发

Javascript/JQuery drop event not firing in Internet Explorer IE 11

本文关键字：IE Explorer Internet JQuery 事件 Javascript      更新时间：2023-09-26

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

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

我甚至遵循了Microsoft页面上给出的建议：https://msdn.microsoft.com/en-us/library/ms536929（v=vs.85）.aspx关于取消"DragEnter"的默认操作和"在ondragenter和ondragover事件处理程序中指定window.event.returnValue=false"（注意：其他浏览器不需要我有一个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:
});

非常感谢您的任何建议！

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.

请找到演示链接。

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

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

首先，这绝不是要回答这个问题，它只是作为一组要点，可能有助于为这个令人困惑的问题找到最终答案。

两种情况

  1. 在同一域上

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

  2. 在不同的域上

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

    • 正如原始海报所指出的那样，使用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之间的行为相同。

相关文章：