码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-02-12 12:24:42      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:冒泡   元素   ati   stop   默认   bsp   image   按钮   href   

技术分享

 

冒泡行为:

    <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;
    });

 

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

标签:冒泡   元素   ati   stop   默认   bsp   image   按钮   href   

原文地址:http://www.cnblogs.com/by-dxm/p/6390573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!