【前端】添加draggable 属性，无论怎么设置都无法触发dragstart后的事件（火狐） IE 和谷歌都可以

在火狐上无法触发dragstart之后的事件，事件做了addEventListener/attachEvent/on+’type’的兼容，事件源做了e.target和e.srcElement的兼容，我在ie 和谷歌上是可以触发的，但是在火狐上只能触发到dragstart，之后的事件好像都触发不了。

1.之前怀疑是浏览器兼容的问题，做了以上兼容之后无效

事件var addEvent = function(obj,type,fn){if(obj.addEventListener) obj.addEventListener(type,fn,false);else if (obj.attachEvent) obj.attachEvent('on'+type,fn);else obj['on'+type] = fn;
}
事件源：
e = e ? e : event;if (!e.target) e.target = e.srcElement;

调用：

addEvent(document,'dragstart',function(e){
e = e ? e : event;if (!e.target) e.target = e.srcElement;
e.target.style.opacity=0.6;
srctd = $(e.target).html();
srcStyle = getEStyle(e.target,['backgroundColor','color']);console.log("dragstart"+srctd,srcStyle);
})
addEvent(document,'drag',function(e){
e = e ? e : event;if (!e.target) e.target = e.srcElement;
pDefault(e);console.log("drag"+$(e.target).html());
})
addEvent(document,'dragend',function(e){
e = e ? e : event;if (!e.target) e.target = e.srcElement;
e.target.style.opacity=1;console.log("dragend"+$(e.target).html());if(flag){ //if target undraggable flag==false // if target draggable flag ==true$(e.target).html(tartd).css(tarStyle);
}else{console.log("end outside");
}
flag = true; //reset flag})

2.经过console.log测试，确实无法进入addEventListener(‘drag’)等等的事件，明明在IE都能触发了。。。。
很奇怪

回答

addEvent(document,'dragstart',function(e){
e = e ? e : event;

e.dataTransfer.setData('text/plain', 'data'); //加上这句，data是传给dataTransfer的数据，具体看文档

if (!e.target) e.target = e.srcElement;

e.target.style.opacity=0.6;
srctd = $(e.target).html();
srcStyle = getEStyle(e.target,[ 'backgroundColor','color'
]); console.log("dragstart"+srctd,srcStyle);
})

你的添加事件addEvent写的有问题，至少在IE下有问题。你的写法在QQ号码出售平台地图IE下是找不到event的。应该这样写 obj.attachEvent(‘on’+type,function(){

fn.call(obj,window.event);

});

更多相关文章

随机推荐

【前端】添加draggable 属性，无论怎么设置都无法触发dragstart后的事件（火狐） IE 和 谷歌都可以

更多相关文章

随机推荐

【前端】添加draggable 属性，无论怎么设置都无法触发dragstart后的事件（火狐） IE 和谷歌都可以