为了账号安全,请及时绑定邮箱和手机立即绑定

关于获取事件目标,target属性和srcElement属性在Firefox下没有效果

代码就是老师讲的那些,然后在ie9和谷歌浏览器都能运行成功,唯独Firefox在响应获取事件目标的时候就没有效果,点击“跳转”,火狐是直接响应弹出盒子事件,接着跳转成功,如图,对于获取事件目标没有响应,控制台也没有提示错误,有遇到一样问题的小伙伴吗?求指教~

正在回答

5 回答

//获取事件目标(绑定该事件的元素)--firefox有bug

getElement:function() {           

return event.target || event.srcElement;  

},



这里没有传event参数

0 回复 有任何疑惑可以回复我~
#1

emily973 提问者

非常感谢!疏忽大意了,谢谢
2017-01-02 回复 有任何疑惑可以回复我~

也是遇到这个问题,试了很多遍   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/”的话会提示找不到文件。)

0 回复 有任何疑惑可以回复我~

<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>

0 回复 有任何疑惑可以回复我~
#1

emily973 提问者

对传参的概念不是很了解,回头补一下,总之,谢谢啦!
2017-01-02 回复 有任何疑惑可以回复我~
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);
});
}


1 回复 有任何疑惑可以回复我~

图呢?代码贴出来,火狐可以的,火狐是不支持IE的一些方法,但是DOM是可以的。

0 回复 有任何疑惑可以回复我~
#1

emily973 提问者

贴了。
2017-01-02 回复 有任何疑惑可以回复我~
#2

emily973 提问者

谢谢,原来是忘记传参了
2017-01-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于获取事件目标,target属性和srcElement属性在Firefox下没有效果

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信