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 之間的行為相同。