JQuery中事件冒泡

定义

在一个对象上触发某类事件，就会执行此事件程序，如果没有处理事件就会向这个对象的父级对象传播直至它被处理，最顶层老大为document对象。

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）

事件气泡有时是不需要的通过event.stopPropagation() 或者event.preventDefault()组织 ----合并写法：return false；

假如页面中有一个模块1，模块1中有又一个模块2，模块2中有个模块3，如果点击模块3中的触发事件，如没有处理程序，他就会向模块2执行，模块2没有继续向模块1执行，此为一个冒泡事件，如果想在模块3就终止需要---return false

<!DOCTYPE html>

<html>

<head>

<style>

.father {width: 500px;height: 500px;background: pink;}

.son {width: 250px;height: 250px;background: red; }

.grandson {width: 150px;height: 150px; background: gold;}

</style>

$(function(){

var $box1 = $('.father');

var $box2 = $('.son');

var $box3 = $('.grandson');

$box1.click(function() {

alert('father');

});

$box2.click(function() {

alert('son'); return false;

});

$box3.click(function(event) {

alert('grandson');

return false;

});

// $(document).click(function(event) {

// alert('grandfather');

// });

})

</script>

</head>

<body>

</div>

</body>

</html>

return false 写在函数内部

转载于:https://www.cnblogs.com/zqlboke/p/9017015.html

你可能感兴趣的文章