拖拽防止火狐瀏覽器開啟新視窗

admin發表於2019-03-22
瀏覽器

最近寫了一個簡單的拖拽效果，在谷歌瀏覽器表現毫無問題。

很多時候，總是預設為谷歌瀏覽器和火狐是最接近標準的瀏覽器，所以在火狐應該也沒問題。

但是經過測試發現，在火狐中有一個較小的缺陷，那就是拖動完成後，會彈出一個新的選項卡視窗。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
#ant {
    width:350px;
    height:100px;
    padding:10px;
    background-color: #ccc;
}
</style>
<script>
window.onload=function(){
    let ant=document.getElementById("ant");
    let dr=document.getElementById("dr");
     
    ant.ondragover=function(ev){
      ev.preventDefault();
    }
    dr.ondragstart=function(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
    }

    ant.ondrop=function(ev){
      let data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      ev.preventDefault();
    }
}    
</script>    
</head>
<body>
<p>按住滑鼠拖動圖片到矩形框</p>
<div id="ant"></div>
<br>
<img id="dr" src="demo/js/img/dr.png" draggable="true">
<script>
</script>
</body>
</html>

上述程式碼可以將底部的圖片拖入到矩形框，在谷歌中一切表現完美正常。

但是在火狐瀏覽器中，會在一個新的視窗開啟這個圖片，這通常並不是我們所需要的。

很多教程介紹說，只要使用ev.preventDefault()阻止預設動作即可阻止上述現象，很明顯上述措施並沒有達成我們的目的，也許很多教程的作者，僅僅是參考了別人的結論，並沒有親自進行驗證，下面介紹一個比較好正規的解決方式。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
#ant {
    width:350px;
    height:100px;
    padding:10px;
    background-color: #ccc;
}
</style>
<script>
window.onload=function(){
    let ant=document.getElementById("ant");
    let dr=document.getElementById("dr");
     
    ant.ondragover=function(ev){
      ev.preventDefault();
    }
    dr.ondragstart=function(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
    }

    ant.ondrop=function(ev){
      let data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      ev.stopPropagation()
      ev.preventDefault();
    }
}    
</script>    
</head>
<body>
<p>按住滑鼠拖動圖片到矩形框</p>
<div id="ant"></div>
<br>
<img id="dr" src="demo/js/img/dr.png" draggable="true">
<script>
</script>
</body>
</html>

不但需要加上ev.preventDefault()阻止預設動作的發生，還需要阻止事件冒泡。

核心程式碼片段你如下：

[JavaScript] 純文字檢視 複製程式碼
ev.stopPropagation()
ev.preventDefault();

上面的程式碼缺一不可，否則在火狐中就有可能出現問題。

相關文章