如何在「drop」事件後停止重定向？

刪除一個文件到在Firefox中div後，網頁會被重定向到該文件。我試圖阻止這種傳播使用jQuery的e.preventDefault()在drop處理程序，並失敗。如何在「drop」事件後停止重定向？

請參閱this demo，將文件放入#test將不會重定向網頁，但會放入#test1會，我想知道爲什麼。我就應該總是綁定處理程序dragenter，dragover，dragleave和drop防止傳播drop後？

更新：

我發現一些技巧上html5doctor：

告訴我們在這個元素拖放瀏覽器，所有我們要做的是取消dragover事件。不過，由於IE的行爲不同，我們需要爲dragenter事件做同樣的事情。

和Mozilla claims：

的偵聽器，用於的dragenter和dragover事件表明有效的放置目標，那就是，當拖動項地方可能被丟棄。

但我在Firefox測試this demo，#test作品和#test1沒有，似乎Mozilla的犯了一個錯誤，並html5doctor是正確的：Firefox的需要dragover才使drop工作。

來源

2012-01-20 Rufus

的ondragover事件需要谷歌瀏覽器和Safari瀏覽器被取消，使燒成ondrop事件。

來源

2012-01-20 08:27:05 xdazz

啊，找到了一個。 'dragenter和dragover事件的監聽者用於指示有效的放置目標'https://developer.mozilla.org/En/DragDrop/Drag_Operations#Specifying_Drop_Targets。但我的演示沒有'dragenter'：http://jsfiddle.net/mKtn2/6/ – Rufus

謝謝！這讓我在Chrome中瘋狂 –

我注意到，它不只是足以抵消onDragOver，但我也不得不取消onDragDrop和onDragLeave。下面，我展示記錄表明用戶在做什麼樣的行爲：

<script type="text/javascript"> 

    var handledragleave = function handleDragLeave(e) { 
      console.log("Floating away. Do code here when float away happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragdrop = function handleDrop(e) { 
      console.log("Dropping. Do code here when drop happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragover = function handleDragOver(e) { 
      console.log("Floating over. Do code here when float over happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    cancelDefaultBehavior(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 
    } 

$('.your-element-being-dragged-to') 
    .on('DragLeave', handledragleave) 
    .on('DragDrop', handledragdrop) 
    .on('DragOver', handledragover); 

</script>

然後你的元素...

<p class="your-element-being-dragged-to">Drag something here!</p>

來源

2017-07-31 15:28:22 HoldOffHunger

如何在「drop」事件後停止重定向？

回答

相關問題