HTML事件冒泡和JQuery阻止事件冒泡的方式

何为事件冒泡：

HTML DOM模型是个树形结构，元素之间有相互嵌套的关系，比如<div><a href="new_url">Click Me</a> </div>中div是父元素而a是子元素。如果父子元素都绑定了同一个事件比如onClick，当内层的子元素的事件被触发时，该事件会被传递到父元素中。

jQuery中如何阻止事件冒泡：

每个jQuery事件都有一个默认的参数对象，这就是event，通过执行该对象的event.stopPropagation();方法可以阻止该事件向上冒泡。

$('div').click(function(event){
alert("click div");
});
$('a').click(function(event){
alert("click a");
event.preventDefault();
});

何为HTML元素的默认行为：

有效HTML元素在被触发时会执行默认的动作，比如<a></a>元素被点击时会默认执行跳转动作。

jQuery中如何阻止事件默认行为：

同理，执行event对象的特定方法：event.preventDefault();

$('div').click(function(event){
alert("click div");
});
$('a').click(function(event){
alert("click a");
event.stopPropagation();
});

jQuery中如何同时阻止事件冒泡和阻止事件默认行为：

在事件处理函数中执行return false;

$('div').click(function(event){
alert("click div");
});
$('a').click(function(event){
alert("click a");
return false;
});