關于獲取事件目標,target屬性和srcElement屬性在Firefox下沒有效果
代碼就是老師講的那些,然后在ie9和谷歌瀏覽器都能運行成功,唯獨Firefox在響應獲取事件目標的時候就沒有效果,點擊“跳轉”,火狐是直接響應彈出盒子事件,接著跳轉成功,如圖,對于獲取事件目標沒有響應,控制臺也沒有提示錯誤,有遇到一樣問題的小伙伴嗎?求指教~
代碼就是老師講的那些,然后在ie9和谷歌瀏覽器都能運行成功,唯獨Firefox在響應獲取事件目標的時候就沒有效果,點擊“跳轉”,火狐是直接響應彈出盒子事件,接著跳轉成功,如圖,對于獲取事件目標沒有響應,控制臺也沒有提示錯誤,有遇到一樣問題的小伙伴嗎?求指教~
2017-01-01
舉報
2017-01-02
//獲取事件目標(綁定該事件的元素)--firefox有bug
getElement:function()?{ ? ? ? ? ??
return?event.target?||?event.srcElement;??
},
這里沒有傳event參數
2017-04-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/”的話會提示找不到文件。)
2017-01-02
<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>
2017-01-02
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); }); }2017-01-02
圖呢?代碼貼出來,火狐可以的,火狐是不支持IE的一些方法,但是DOM是可以的。