魏祖清
- 浏览: 180309 次
- 性别:
- 来自: 福建
-
最新评论
-
卡殿Love：
你好！ 谢谢你的文章让我知道其中的原因，目前正在做手机端上的项 ...
web手机开发（iPhone和Andriod）关于position:fixed 属性的讨论
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：
preventDefault方法的起什么作用呢？我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
stopDefault(e);
}
</script>
</body>
</html>
此时点击百度链接，不会打开http://www.baidu.com，而只是弹出一个alert对话框。
preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。
stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true; // ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation(); // 其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
大家运行一下上面的代码就明白了。
preventDefault方法的起什么作用呢？我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
stopDefault(e);
}
</script>
</body>
</html>
此时点击百度链接，不会打开http://www.baidu.com，而只是弹出一个alert对话框。
preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。
stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true; // ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation(); // 其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
大家运行一下上面的代码就明白了。
分享到：
发表评论
-
LABjs、RequireJS、SeaJS 哪个最好用？为什么？
2013-10-28 16:36 676LABjs 的核心是 LAB（Loadin ... -
正则表达式
2011-03-26 09:00 856正则表达式可以: •测试字符串的某个模式。例如，可以对一个输入 ... -
offsetParent,parentNode,parentElement区别
2011-03-22 15:09 1326offsetParent 指与位置有关的上级元素 pare ... -
javascrip编码(escape(), encodeURL(), encodeURIComponent())
2010-10-27 10:04 1031escape() 方法： 采用ISO-Latin字符集对指定 ... -
splice() 方法
2010-03-15 10:56 973splice() 方法用于插入、删除或替换数组的元素。 语法 ... -
ajax的原理和运行机制
2010-03-12 17:36 886关于ajax，是最近炒得非常火的一种技术，并且时下它也是非常流 ... -
HTML文档中小meta的大作用
2010-01-25 10:37 722meta 是用来在HTML文档中 ... -
JavaScript的陷阱
2010-01-22 13:38 782区分大小写 变量名和 ... -
连续字符自动换行的解决方案
2010-01-21 11:58 878http://dancewithnet.com/2008/12 ... -
JS判断脚本是否加载完成
2010-01-21 11:29 17011.function include_js(file) { 2 ... -
JavaScript程序编码规范
2010-01-20 15:27 828JavaScript文件 JavaScript程 ... -
js的nextSibling
2010-01-13 11:28 2519nextSilbling 属性的作用是：直接返回一个节点之后的 ... -
Javascript去掉字符串前后空格
2010-01-07 10:20 1398给string类型添加方法 String.prototype ... -
javascript中的location.reload() 和 location.replace()的区别和应用
2010-01-06 17:42 2450首先介绍两个方法的语法： reload 方法，该方法强迫浏览 ... -
为什么尽量用局部变量代替全局变
2010-01-06 16:48 1096在如何提高JavaScript性能 ... -
javascript中substring()方法与substr()方法的区别
2010-01-06 16:45 21401 这两个方法都是String对象的方法 2 substr( ... -
关于IE和火狐下JS加载循序的问题
2009-12-16 10:42 1214FF是按照循序加载的，而IE却不是的，也就是说FF是同步加载， ... -
当嵌套iframe时，提供了一个统一的访问超时退出的UI界面
2009-12-16 09:04 3930Js代码：（来自Javaeye中的一段代码） functio ... -
异步加载组织结构树以及操作
2009-11-25 11:53 3315//============================= ... -
js中 break和 continue区别
2009-11-25 11:46 3928例子： <html> <body&g ...
相关推荐
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的...
### JavaScript中的`preventDefault`与`stopPropagation` #### 一、`preventDefault`详解 `preventDefault`方法在JavaScript中主要用于阻止元素的默认行为。在Web开发中，很多HTML元素都具有默认的行为，例如，`...
在JavaScript和jQuery中，`return false;` 和 `e.preventDefault();` 都被用来取消默认行为，但它们之间存在一些微妙的区别。这两种方法通常在处理DOM事件，如点击（click）事件时使用，以防止浏览器执行与事件关联...
3. 事件处理：使用.on()方法绑定事件，以及$.event.preventDefault()和$.event.stopPropagation()控制事件行为。 4. 动画：使用fadeIn()、slideUp()等方法创建平滑的过渡效果，以及animate()函数自定义动画。 5. ...
本软件"JS经典代码 JavaScript 经典"正是为了帮助开发者更好地理解和学习JavaScript而设计的，包含了丰富的源码示例和演示。 1. **基础概念**：JavaScript基于ECMAScript规范，具有面向对象、函数式、弱类型等特性...
标题中的“NativeJS随记 - 浅析JavaScript Events”表明这篇博客主要讨论的是JavaScript中的事件处理机制。JavaScript事件是Web开发中的重要组成部分，它允许我们响应用户的交互或浏览器的内部变化。在这里，我们将...
此外，JavaScript还拥有强大的库和框架，如jQuery简化DOM操作，React.js和Vue.js用于构建复杂的用户界面，Node.js则让JavaScript可以在服务器端运行。 总之，这份"JavaScript参考手册 -（1）.chm"涵盖了JavaScript...
它是一种轻量级的脚本语言，主要运行在浏览器环境中，但也适用于服务器端（如Node.js）和其他平台。"JavaScript经典实例"这个主题涵盖了一系列经过实践验证的代码片段和实用技巧，旨在帮助开发者深化对JavaScript的...
通过`event.preventDefault()`和`event.stopPropagation()`，可以精确控制事件的传播和行为。 8. **性能优化** 考虑到性能，避免在页面加载时执行大量的JavaScript代码。可以使用事件委托减少监听器的数量，延迟...
总之，理解和掌握JavaScript中的事件传播以及防止事件传播的方法，对于编写高效且具有良好用户体验的前端代码至关重要。通过合理使用这些方法，我们可以精确控制事件的执行流程，避免不必要的交互影响，提升用户界面...
《js中的事件捕捉模型与冒泡模型实例分析》一文中详细介绍了这两者模型的区别和应用实例。 总之，preventDefault()方法是jQuery事件处理中一个非常实用的工具，它可以帮助开发者对用户界面的交互行为进行精细控制，...
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡，并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中，阻止事件冒泡可以通过以下两种方式...
- `preventDefault()`和`stopPropagation()`是事件处理函数，用于阻止默认行为和事件传播。 - 使用`_CACHE`存储对象可以在多个页面间共享数据。 - `marginHeight`和`marginWidth`是iframe元素的边缘尺寸，可以...
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
总的来说，理解和正确使用`event.preventDefault()`和`event.stopPropagation()`是JavaScript事件处理中的关键技能，它们能够帮助开发者实现更灵活的交互和控制。在实际项目中，根据具体需求选择合适的方法，确保...
JavaScript，简称JS，是Web开发中的重要脚本语言，用于实现网页的动态效果和交互功能。这个主题“常用的JS特效函数”涵盖了多个方面，包括动画、事件处理、DOM操作等，下面将详细介绍这些知识点。 一、动画效果 ...
JavaScript 事件模型是Web开发中的核心概念，它定义了如何处理和响应用户或浏览器的交互。ECMAScript规范中的ECMA-357是与事件处理相关的一部分，它提供了JavaScript中处理事件的标准。 事件流是JavaScript事件模型...
本文将深入探讨如何在JavaScript中处理按键事件，并解决在IE和火狐浏览器上的兼容性问题。 首先，我们来了解JavaScript中的几个主要按键事件： 1. `keydown`：当用户按下键盘上的键时触发，可以重复触发，只要键...