添加draggable 属性,无论怎么设置都无法触发dragstart后的事件(火狐) IE 和 谷歌都可以

Lindsy.T
  • 23

在火狐上无法触发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都能触发了。。。。
很奇怪

回复
阅读 6.9k
2 个回答
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);
                        })
久雨初晴
  • 3
新手上路,请多包涵

你的添加事件addEvent写的有问题,至少在IE下有问题。你的写法在IE下是找不到event的。应该这样写 obj.attachEvent('on'+type,function(){

fn.call(obj,window.event);

});

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏