欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阻止事件冒泡

程序员文章站 2022-06-03 22:01:34
...
<tr id='tr' onclick="clicktr()">
      <td class="hover-pointer"  id='td1' onclick="clicktd1()">强仔;飞翔的板砖;香吉;乌索普...</td>
      <td class="hover-pointer" id='td2' onclick="clicktd2()">天气不错,赶快来签到吧~~惊喜等着你哦,是什么呢?你猜猜看哈...</td>
</tr> 


js阻止事件冒泡
<script type="text/javascript">           
    function clicktr(){  
        alert("这是tr事件");  
    }  
    function clicktd1(e){  
        e.stopPropagation();  
        //td1阻止事件冒泡;
    }  
    function clickP2(){  
       //td2没有阻止事件冒泡;
    }        
</script>  

注:阻止冒泡后点击td1不会弹出提示框“这是tr事件”,没有阻止事件冒泡点击td1会弹出提示框

jquery方法如下:
$(function(){  
    $("#tr").click(function(){  
        alert("这是tr事件");  
    })  
    $("#td1").click(function(event){   
        event.stopPropagation();  
        //td1阻止事件冒泡;
    })  
    $("#p2").click(function(){  
        //td2没有阻止事件冒泡;
    })  
})  


比如提交表单(submit)有默认事件,可以用阻止默认行为的方法来阻止
$("input[type='submit']").click(function(event){   
    event.preventDefault();  
    //阻止默认行为;
})