问答详情
源自:3-2 IE中的事件对象

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

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

提问者:emily973 2017-01-01 10:22

个回答

  • 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是可以的。