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

jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

2012-12-06 14:50 513 查看

()阻止事件冒泡
<head>

<title></title>

<script src="Scripts/jquery-1.4.1.js"
type="text/javascript"></script>

</head>

<body>

<table>

<tr>

<td><span>冒泡事件测试</span></td>

</tr>

</table>

</body>

我们先看这段代码：

<script type="text/javascript">

$(function () {

$("table").click(function
() { alert("table alert"); });

$("td").click(function
() { alert("td alert"); });

$("span").click(function
(){

alert("span alert");

});

});

</script>

我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。

有的时候我们不希望事件冒泡咋办？

<script type="text/javascript">

$(function () {

$("table").click(function
() { alert("table alert"); });

$("td").click(function
() { alert("td alert"); });

$("span").click(function
(e){

alert("span alert");

e.stopPropagation();

});

});

</script>

如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。

e.preventDefault()阻止事件默认行为。

$("a").click(function
(e) {

alert("默认行为被禁止喽");

e.preventDefault();

});

<a href="http://www.baidu.com">测试</a>

return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：

if (ret===false){

　　event.preventDefault();

　　event.stopPropagation();

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航