您的位置:首页 > Web前端 > JQuery

jQuery之防止冒泡事件

2016-05-17 14:25 489 查看
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

方法1:

event.stopPropagation(); // 阻止事件冒泡

有时候点击提交按钮会有一些默认事件。但是如果没有通过验证的话,就不应该继续。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

方法2:

return false;

示例代码:

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation();    //  阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation();    //  阻止事件冒泡
});

})
</script>

<div id="content"><span>内层span元素</span></div>

<div id="msg"></div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: