js阻止浏览器的默认行为及冒泡

浏览器的默认行为

阻止浏览器的默认行为

function preventDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    } else {
        window.event.returnValue = false;
    }
    return false;
}

阻止事件冒泡

function stopPropagation(e) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
    return false;
}

工作小bug解决记

问题描述：

• 页面上有个表单，用于提交表单的按钮是button，用jQuery来响应这个按钮的点击行为，通过post提交，用户输完一串input之后，直接按回车键，相当于点击了那个button，出现bug：一按回车，就跳转到了另外一个页面。
  原因：需要阻止浏览器的默认行为，因为submit的默认行为是提交表单，那个自定义的onClick事件就不会执行了。

解决办法：

• 要先取消默认行为，然后执行jQuery代码来提交。因为若type=”submit”，直接点击按钮会跳转到另外一个页面，若type=”button”，则点击按钮不会跳转，但是按回车键也会跳转到另一个页面。

扩展：

• 要注意，在onkeydown事件中调用preventDefault(e) 函数可行，但是在onkeyup事件中调用就不起作用了。
• a标签的href若为空，如果不阻止浏览器的默认行为，产生的效果是刷新页面。若href=”javascript:void(0);” 可以阻止默认行为。若href=”#”会阻止默认行为，但是会影响页面的url，url后面会增加一个#号，有可能会影响路由，会触发react-router里的onUpdate事件，从而产生一些影响，如重新渲染整个组件。
• jQuery的写法：
  
  • return false 阻止默认事件和冒泡事件
  • event.preventDefault() 只阻止默认事件
  • event.stopPropagation() 只阻止冒泡事件