javascript (jQuery)中的冒泡和默认行为

冒泡行为–如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。

html部分：

<form action="123.html">
    <div style="width:200px;height:200px;background:#ccc;">
        <input type="submit" value="submit"/>
        <a href="www.baidu.com">链接</a>
    </div>
    </form>

jQ部分：

$(function(){
    $('input').click(function(){
        alert('input')
    })
    $('div').click(function(){
        alert('div')
    })
    $(document).click(function(){
        alert('document')
    })
});

元素关系：点击input元素，依次显示input–>div–>document; 点击div显示div—>document;点击document显示document，故元素的重叠绑定事件后出现冒泡问题。
取消冒泡行为：在要取消该行为的元素下添加：e.stopPropagation();

默认行为–网页中的元素，在操作的时候会有自己的默认行为。比如：右击弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。

a标签 阻止默认行为：
$(function(){
    $('a').click(function(e){
        e.preventDefault(); //点击超链接元素后不会跳转只会弹窗
        alert('a')
    })
});

表单提交阻止默认行为，注意：提交按钮必须在<form action="xx"></form>内，并且已经设置好了action,才能正常下提交后跳转。
方法1

：$(function(){       //直接阻止点击后的默认行为                                              
    $('input').click(function(e){
        e.preventDefault();
        alert('a')
    })
});

方法2：

 $(function(){     //阻止表单submit事件的默认行为，语义更好
    $('form').submit(function(e){
        e.preventDefault();
        alert('a')
    })
});

既阻止冒泡又阻止默认行为：同时添加

e.stopPropagation();
e.preventDefault(); 
 //可以用return false 代替,效果相同