时间对象冒泡行为和默认行为

Posted 2020-08-30 党兴明

时间对象冒泡行为和默认行为

 

冒泡行为：

    <div style="width: 200px;height: 200px;background-color: red;">
        <input type="button" value="按钮" />
    </div>    

$(function(){
    
    $(\'input\').bind(\'click\',function(e){
        alert(\'input\');
    });
    
    $(\'div\').bind(\'click\',function(e){
        alert(\'div\');
    });
    
    $(document).bind(\'click\',function(e){
        alert(\'document\');
    });
    
});

阻止冒泡行为：

$(function(){
    
    $(\'input\').bind(\'click\',function(e){
        e.stopPropagation(); //禁止冒泡
        alert(\'input\');
    });
    
    $(\'div\').bind(\'click\',function(e){
        e.stopPropagation(); //禁止冒泡
        alert(\'div\');
    });
    
    $(document).bind(\'click\',function(e){
        alert(\'document\');
    });
    
});

网页元素默认行为阻止：

//<a href="http://www.baidu.com" target="_blank">百度</a>
$(function(){
    
    $(\'a\').click(function(e){
        e.preventDefault(); //阻止点击的默认行为，不会跳转
        alert(\'百度\');
    });
    
});

既阻止冒泡有阻止默认行为：

可以：

    $(\'a\').click(function(e){
        alert(\'百度\');
        e.stopPropagation();
        e.preventDefault(); //阻止点击的默认行为，不会跳转
    });
    
    //简写方法
    $(\'a\').click(function(e){
        alert(\'百度\');
        return false;
    });