关于获取事件目标，target属性和srcElement属性在Firefox下没有效果
emily973
2017-01-01 10:22
代码就是老师讲的那些，然后在ie9和谷歌浏览器都能运行成功，唯独Firefox在响应获取事件目标的时候就没有效果，点击“跳转”，火狐是直接响应弹出盒子事件，接着跳转成功，如图，对于获取事件目标没有响应，控制台也没有提示错误，有遇到一样问题的小伙伴吗？求指教~
5回答
-
- o巧巧o_0
- 2017-01-02 17:37:33
//获取事件目标（绑定该事件的元素）--firefox有bug
getElement:function() {
return event.target || event.srcElement;
},
这里没有传event参数
-
- 慕粉3996208
- 2017-04-02 00:58:35
也是遇到这个问题，试了很多遍 firefox是可以运行的了的
event.js
getElement:function(event){//这里要加参数，同时在script.js文件里调用这个函数的时候也是要给它传参的
return event.target || event.srcElement;
},
之前之所以一直显示不出效果估计是因为：
<script src="event.js"></script>
<script src="script.js"></script>
html文件在导入js文件的时候出问题，把前面“js/”去掉。（加上“js/”的话会提示找不到文件。）
-
- o巧巧o_0
- 2017-01-02 17:29:06
<input type='buttom' value='target' id='btn'>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(ev){
ev=ev|| window.event;
var ele=ev.target || ev.srcElement;
alert(ele.nodeName);
};
};
</script>
-
- emily973
- 2017-01-02 15:14:26
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/event.js"></script> <script src="js/script.js"></script> </head> <body> <div id="box"> <!-- <input type="button" id="btn" value="按钮" /> --> <a href="event.html" id="go">跳转</a> </div> </body> </html>
event.js
var eventUtil={ //添加句柄 addHandler:function(element,type,handler) { if (element.addEventListener) {//dom2,兼容广大浏览器 element.addEventListener(type,handler,false); }else if(element.attachEvent) {//兼容IE浏览器 element.attachEvent('on'+type,handler); }else{//dom0,兼容老旧浏览器 element['on'+type]=handler; } }, //这个逗号一定一定要加！ //删除句柄 removeHandler:function(element,type,handler) { if (element.removeEventListener) { element.removeEventListener(type,handler,false); }else if (element.detachEvent) { element.detachEvent('on'+type,handler) }else{ element['on'+type]=null; } }, //一般浏览器能直接用event引入对象，但是ie浏览器尤其是ie8之前的版本需要window.event引入事件对象；所以要先判断 //event=event||window.event; getEvent:function(event) { return event?event:window.event; //相当于return event || window.event }, //获取事件类型(不存在浏览器兼容问题) getType:function() { return event.type; }, //获取事件目标（绑定该事件的元素）--firefox有bug getElement:function() { return event.target || event.srcElement; }, //阻止事件的默认行为 preventDefault:function(event) { if (event.preventDefault) { event.preventDefault(); }else{ event.returnValue=false;//设置为false表示阻止事件的默认行为 } }, //阻止事件冒泡 stopPropation:function() { if (event.stopPropation) { event.stopPropation(); }else { event.cancelBubble=true;//设置为true表示阻止冒泡 设置为false表示不阻止冒泡 } } }script.js
window.onload=function() { var go=document.getElementById('go'), box=document.getElementById('box'); eventUtil.addHandler(box,'click',function(e){ alert("我是整个父盒子"); }); //想知道事件来自哪个方法 eventUtil.addHandler(go,'click',function(e) { e=eventUtil.getEvent(e); alert(eventUtil.getElement(e)); //firefox不行 //eventUtil.preventDefault(e); //firefox不行 //eventUtil.stopPropation(e); }); } -
- 晴朗_63566962
- 2017-01-02 13:19:38
图呢？代码贴出来，火狐可以的，火狐是不支持IE的一些方法，但是DOM是可以的。
DOM事件探秘
99544 学习 · 1197 问题
相似问题