js阻止瀏覽器的默認行爲以及中止事件冒泡（用JQuery實現回車提交，兼容IE、FF瀏覽器） ...

在前端開發工做中，因爲瀏覽器兼容性等問題，咱們會常常用到「中止事件冒泡」和「阻止瀏覽器默認行爲」。

1.阻止瀏覽器的默認行爲

function stopDefault(e) {
        //若是提供了事件對象，則這是一個非IE瀏覽器
        if(e && e.preventDefault) {
        　　//阻止默認瀏覽器動做(W3C)
        　　e.preventDefault();
        } else {
        　　//IE中阻止函數器默認動做的方式
        　　window.event.returnValue = false;
        }
        return false;
    }

2.中止事件冒泡

function stopBubble(e) {
    //若是提供了事件對象，則這是一個非IE瀏覽器
    if(e && e.stopPropagation) {
  　　//所以它支持W3C的stopPropagation()方法
  　　e.stopPropagation();
    } else {
  　　//不然，咱們須要使用IE的方式來取消事件冒泡
  　　window.event.cancelBubble = true;
    }
    return false;
}

一個頁面，有一個表單，用來提交表單的按鈕是個button，用jquery來響應這個按鈕的點擊動做，經過post提交，供用戶輸入的是一個文本 框，用戶輸入完要填的東西以後，直接按回車鍵，就至關於按了那個button，剛開始沒注意這個問題，一按回車，就跳轉到了另一個頁面，查了不少資料， 才發現要阻止瀏覽器的默認行爲，，由於SUBMIT的默認行爲是提交表單，那麼你的JS就不會執行了。因此先取消默認行爲。而後執行你的JQ來提交。具體 的我也說不清楚，只知道若文本框的type="submit",直接點擊按鈕的時候就會跳到另一個頁面，若type="button",則點擊按鈕的時 候不會出現這樣的狀況，可按回車鍵的時候會跳到另一個頁面，解決方法,看下面代碼：

jsp代碼：

<input type="text" name="appGrpName_s" id="appGrpName_s" onkeydown="enter_down(this.form, event);"/>

 

js代碼：

<script type="text/javascript">
    function enter_down(form, event) {
      if(event.keyCode== "13") {
          stopDefault(event);
          submitForm(form,'actionDiv');
      }
    }

    function stopDefault(e) {
        //若是提供了事件對象，則這是一個非IE瀏覽器
        if(e && e.preventDefault) {
        　　//阻止默認瀏覽器動做(W3C)
        　　e.preventDefault();
        } else {
        　　//IE中阻止函數器默認動做的方式
        　　window.event.returnValue = false;
        }
        return false;
    }
</script>

經過上面的代碼就能夠實現按回車的時候至關於點擊「提交」按鈕。且上面的代碼兼容IE、FF瀏覽器。

 

有時候遇到須要屏蔽瀏覽器的一些快捷鍵行爲時，好比說：ff下按Backspace鍵,會跳到上一個瀏覽器的歷史記錄頁面;

注意要在onkeydown事件中調用stopDefault(event)函數,在onkeyup事件中調用是不成功的。