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事件中调用是不成功的。