javascript - 火狐浏览器下阻止drop事件的默认行为
本文介绍了javascript - 火狐浏览器下阻止drop事件的默认行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0;padding:0;}
ul{
margin:30px;
}
.clearfix{
*zoom=1;
}
.clearfix:after{
content:'';
clear:both;
display:block;
}
li{
float:left;
width:200px;
height:300px;
list-style:none;
margin-right:30px;
}
li img{
width:200px;
height:200px;
}
#shopCar{
width:600px;
min-height:300px;
margin-top:50px;
margin-left:20px;
border:1px solid #333;
}
.box{
width:200px;
float:left;
}
#allMoney,.box3{
text-align:right;
}
p{
border-bottom:1px dashed #ccc;
}
</style>
</head>
<body>
<ul class="clearfix">
<li draggalbe="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li>
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</li>
</ul>
<div id="shopCar">
<!--<p class="clearfix">
<span class="box box1">1</span>
<span class="box box2">DOM编程艺术</span>
<span class="box box3">45￥</span>
</p>-->
<div id="allMoney">总价：<span>0</span>￥</div>
</div>
</body>
<script>
var aLi=document.getElementsByTagName("li");
var shopCar=document.getElementById("shopCar");
var allMoney=document.getElementById("allMoney").getElementsByTagName("span")[0];
for (var i=0;i<aLi.length;i++){
aLi[i].ondragstart=function(ev){
var ev=ev||window.event;
var aP=this.getElementsByTagName("p");
ev.dataTransfer.setDragImage(this,0,0);
ev.dataTransfer.setData("name",aP[0].innerText);
ev.dataTransfer.setData("price",aP[1].innerText);
}
}
shopCar.ondragenter=function(){
this.style.borderColor="red";
}
shopCar.ondragover=function(ev){
var ev=ev||window.event;
ev.preventDefault();
}
shopCar.ondragleave=function(){
this.style.borderColor="#333";
}
shopCar.ondrop=function(ev){
var ev=ev||window.event;
ev.preventDefault();
ev.returnValue=false;
var name=ev.dataTransfer.getData("name");
var price=ev.dataTransfer.getData("price");
var oP=document.createElement("p");
oP.className="clearfix";
var str="<span class='box box1'>1</span><span class='box box2'>"+name+"</span>"+price+"<span class='box box3'></span>";
oP.innerHTML=str;
this.insertBefore(oP,this.children[0]);
allMoney.innerHTML=parseFloat(allMoney.innerHTML)+parseFloat(price)+'';
}
</script>
</html>
已经用ev.preventDefault()了，但拖放图片还是会新窗口打开图片。为什么呢？
解决方案
发现加了句 ev.stopPropagation() 就可以了，应该是火狐的冒泡和捕获的事件触发顺序问题。
shopCar.ondrop=function(ev){
var ev=ev||window.event;
ev.preventDefault();
ev.stopPropagation();
ev.returnValue=false;
var name=ev.dataTransfer.getData("name");
var price=ev.dataTransfer.getData("price");
var oP=document.createElement("p");
oP.className="clearfix";
var str="<span class='box box1'>1</span><span class='box box2'>"+name+"</span>"+price+"<span class='box box3'></span>";
oP.innerHTML=str;
this.insertBefore(oP,this.children[0]);
allMoney.innerHTML=parseFloat(allMoney.innerHTML)+parseFloat(price)+'';
}这篇关于javascript - 火狐浏览器下阻止drop事件的默认行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
