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

e.stopPropagation()阻止事件冒泡

<head>

<title></title>

<script src="http://cordial99.blog.163.com/blog/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://cordial99.blog.163.com/blog/http://www.baidu.com">测试</a>

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

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

if (ret===false){

  event.preventDefault();

  event.stopPropagation();

}

时间: 2024-10-11 01:38:10

jQuery中return false,e.preventDefault(),e.stopPropagation()的区别的相关文章

jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)

有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <table> <tr> <td>

jquery中return false的作用

jquery中的return false既阻止默认事件,又阻止冒泡: 在原生的js中,return false只有一个功能,那就是阻止默认事件. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <style

关于js中return false、event.preventDefault()和event.stopPropagation()

在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此总结下它俩的区别,顺便带上event.stopPropagation()一起区分下. 一.原生js中: 关于return false和preventDefault: 在W3C Document Object Model Events Specification1.3版本中提到过: The Event

jQuery中的$(window)与$(document)几个用法区别

[window对象]    它是一个顶层对象,而不是另一个对象的属性,即表示浏览器中打开的窗口. 1.属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象) frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象) history 窗口的历史列表(该属性本身也是一个对象) length 窗口内的框架数 locat

[转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> 1.$("li").wrap("<div></div>"); 每一个选择器都添加 <

JS下offsetLeft,style.left,以及jQuery中的offset().left,css(&quot;left&quot;)的区别。

JS下offsetLeft,style.left,以及jQuery中的offset().left,css("left")的区别. JS下的offsetLeft和style.left,以及jquery的css("left"),对定位的理解相似,如果父元素中有定位元素,都是相对于上一个定位元素(position不为static)定位. 值得一提的是如果没有已经定位的父元素,那么offsetLeft指向的是文档(document)的左边缘,而style.left与css(

jquery事件函数和原生事件绑定函数中return false的区别

一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件绑定事件的话,事件函数返回false会是个什么情况,看看是不是和jquery一个样:<!doctype html><html>        <head>                <meta charset='utf-8' />             

浅谈 return false 和preventDefault stopPropagation stopImmediatePropagation 的正确用法

1.使用return false实际上做了3件事:(谨慎使用) event.preventDefault(); event.Propagation(); 停止回掉函数执行并立即返回 2.event.preventDefault()  ----->阻止浏览器继续执行默认行为 3.event.stopPropagation() ----->停止事件冒泡 event bubbling 4. stopImmediatePropagation ------>停止一个事件继续执行 link:http

jquery中的trigger()和preventDefault()方法

trigger()方法用户模拟用户操作,比較常见的一种情况就是输入框自己主动获得焦点: <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.js"></script> <title>jquery</title> &