事件物件相容瀏覽器

2021-08-21 04:37:35 字數 1484 閱讀 4111

1.滑鼠事件物件的button屬性(了解)

button 控制使用者操作的按鍵

左鍵 : 0

滾輪 : 1

右鍵 :  2

ie下的資料

左鍵 :1

滾輪 :4

右鍵 :  2

案例 跨瀏覽器相容事件物件button的屬性

function getbutton(evt)else if( window.event ) }

}

2.事件流

當某個事件執行時,從子元素向父元素觸發 或 從父元素向子元素觸發 稱為事件流

事件流的兩種模式

事件冒泡:

子元素向父元素觸發

概念:當某個事件觸發時,同樣的事件會向父元素觸發,這個過程就稱為事件冒泡。不是所有事件都會產生冒泡問題,如onblur onfocus onload

阻止冒泡:

現代瀏覽器:e.stoppropagation();

ie瀏覽器:e.cancelbubble = true;

相容:if( e.stoppropagation )else

或 : e.stoppropagation ? e.stoppropagation() : 

e.cancelbubble = true;

//跨瀏覽器阻止事件冒泡行為

function

stoppropa(e

)else }

事件捕獲:

從父元素向子元素觸發

冒泡案例:

彈出個人資料

3.阻止事件預設行為

現代瀏覽器:  e.preventdefault();

ie:returnvalue = false;

相容:e.preventdefault ? e.preventdefault() : e.returnvalue = false;

事件執行函式中加 return false阻止預設行為,所有瀏覽器都相容 //

跨瀏覽器取消瀏覽器預設行為

function

stopdefault(e

)else }

4.事件監聽addeventlistener() 高版本瀏覽器

事件監聽的好處:

1.可以為乙個元素繫結多次同乙個事件

2.程式設計師可以使用事件監聽方式 確定 觸發的事件過程是冒泡還是捕獲

事件源.addeventlistener("沒有on的事件",function(){},true/false);預設false冒泡,true為捕獲

如果同一元素既有捕獲監聽,又有冒泡監聽,優先執行捕獲。

ie事件監聽:document.attachevent("on+事件",function(){});沒有第三個引數 沒有捕獲或冒泡的區分

相容事件監聽函式

function addevent( obj , type , callback )else }

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...