js 瀏覽器的預設行為怎麼消除

2021-07-23 16:39:29 字數 1049 閱讀 3715

那麼為什麼我們要消除瀏覽器的預設行為呢?因為有時在你給內容新增乙個事件時,瀏覽器預設的為冒泡型事件觸發機制,所以會觸發你不想觸發的事件。我們就需要消除瀏覽器的預設行為來使我們設定的事件能被正確觸發。

即在乙個物件上觸發某類事件(比如單擊onclick事件),如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理(父級物件所有同類事件都將被啟用),或者它到達了物件層次的最頂層,即document物件(有些瀏覽器是window)。

打個比方說:你在地方法院要上訴一件案子,如果地方沒有處理此類案件的法院,地方相關部門會幫你繼續往上級法院上訴,比如從市級到省級,直至到**法院,最終使你的案件得以處理。

如以下**:

這裡我們可以利用消除冒泡行為的**來達到消除冒泡行為的目的:

obtn.οnclick=function (ev);

即物件名.cancelbubble=true;

這樣單擊obtn就不會令其父級元素也觸發onclick事件了

不過話說回來,我們應該怎樣取消掉瀏覽器的預設行為呢?

舉個例子,來消除瀏覽器右鍵出現選單的事件:

其中oncontextmenu便是指在在元素中使用者右擊滑鼠時觸發並開啟上下文選單的事件。這裡我們使用return,返回乙個false給此函式,然後我們在瀏覽器中右鍵便無法出現選單了。

實戰:製作乙個只能輸出數字的文字框:

這裡我們先用onkeydown事件來看鍵盤上數字對應的數字範圍是多少

執行**發現,小鍵盤上的0~9對應的範圍為96~105,我們知道了範圍便可來編寫**了

以上**意為當在文字框輸入內容時,將判斷鍵盤上按下的鍵數字為多少,若不在96~105的範圍內時,便返還乙個false值,使其不生效,這樣便可達到只能輸入數字的目的。但會發現我們輸入數字時,若輸錯了會發現連退格鍵都按不了,這樣我們改進一下,用 以上方法再去測試一下退格鍵為多少。

測試後發現退格鍵為8,我們再將這個條件加進**,使退格鍵和數字都能生效

謝謝**

JS瀏覽器的預設行為及阻止行為

一 瀏覽器的預設行為以及阻止行為 一 右鍵選單事件 oncontextmenu 阻止 return false 阻止 標準瀏覽器 event.preventdefault ie8及以下 event.returnvalue false 相容 event.preventdefault event.pre...

JS停止事件冒泡 阻止瀏覽器預設行為

一 停止事件冒泡 如果提供了事件物件,則這是乙個非ie瀏覽器 if e e.stoppropagation 因此它支援w3c的stoppropagation 方法 e.stoppropagation else 否則,我們需要使用ie的方式來取消事件冒泡 window.event.cancelbubb...

JS阻止事件冒泡以及瀏覽器預設行為

e的相容 function fn e firefox裡的event跟ie裡的不同,ie裡的是全域性變數,隨時可用。firefox裡的要用引數引導才能用,是執行時的臨時變數 在ie opera中是window.event,在firefox中是event。而事件的物件,在ie中是window.event...