mysql 冒泡_jquery阻止事件冒泡

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

下面是html代码部分：

外层div元素

内层span元素

外层div元素

对应的jQuery代码如下：

$(function(){

// 为span元素绑定click事件

$('span').bind("click",function(){

var txt = $('#msg').html() + "

内层span元素被点击.

$('#msg').html(txt);// 设置html信息

});

// 为div元素绑定click事件

$('#content').bind("click",function(){

var txt = $('#msg').html() + "

外层div元素被点击.

$('#msg').html(txt);

});

// 为body元素绑定click事件

$("body").bind("click",function(){

var txt = $('#msg').html() + "

body元素被点击.

$('#msg').html(txt);

});

})

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

修改如下：

$(function(){

// 为span元素绑定click事件

$('span').bind("click",function(event){

var txt = $('#msg').html() + "

内层span元素被点击.

$('#msg').html(txt);

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

});

// 为div元素绑定click事件

$('#content').bind("click",function(event){

var txt = $('#msg').html() + "

外层div元素被点击.

$('#msg').html(txt);

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

});

// 为body元素绑定click事件

$("body").bind("click",function(){

var txt = $('#msg').html() + "

body元素被点击.

$('#msg').html(txt);

});

})

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

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