深入了解preventDefault与stopPropagation
event.preventDefault()用法介绍(阻止默认事件)
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。
例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。
注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
例子:
$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
}); <a href="http://www.baidu.com">测试</a>
event.stopPropagation()用法介绍(阻止冒泡)
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。
注意:虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
event是DOM的事件方法,所以不是单独使用,比如指定DOM
<div id="A">
<div id="B">
</div>
</div>
<script>
var a = document.getElementById('A'),
b = document.getElementById('B');
function handlera (e) {
console.log(e.target);
}
function handler (e) {
console.log(e.target);
e.stopPropagation();
}
b.addEventListener('click', handler, false);
a.addEventListener('click', handlera, false);
</script>
点击B,输出:
<div id="B"></div>
1 <div id="A">
<div id="B">
</div>
</div>
<script>
var a = document.getElementById('A'),
b = document.getElementById('B');
function handlera (e) {
console.log(e.target + 'a');
}
function handler (e) {
console.log(e.target + 'b');
}
b.addEventListener('click', handler, false);
a.addEventListener('click', handlera, false);
</script>
点击B时,输出:
[object HTMLDivElement]b
[object HTMLDivElement]a
以上例子,不难看出stopPropagation()功能就是阻止了冒泡,上面第二个例子中,没有用这个方法阻止冒泡,当点击子元素时,由于事件冒泡,触发了父元素的click事件,所以第二个例子中会多出现一次输出内容,即为:触发A元素点击事件的输出内容。
jquery中return false等效于同时调用e.preventDefault()和e.stopPropagation();
return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:
if(ret===false){
event.preventDefault();
event.stopPropagation();
}
以上就是我对preventDefault与stopPropagation的了解,有很多的不足,请大家多多指出,多多留言,谢谢!!!
深入了解preventDefault与stopPropagation的更多相关文章
- js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...
- preventDefault()、stopPropagation()、return false 之间的区别
“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...
- js中的preventDefault和stopPropagation
首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href=" ...
- javascript中间preventDefault与stopPropagation角色介绍
preventDefault的作用是什么方法,它? 我们知道,例如,<a href="http://www.baidu.com">百度</a>,这是html ...
- preventDefault 和 stopPropagation
概述 以前开发项目的时候,总是分不清楚 preventDefault 和 stopPropagation,每次都是用 @click.stop试一下,不能就用@click.prevent试一下.今天来好 ...
- e.preventDefault() e.stopPropagation()和return false的区别
e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...
- JS preventDefault ,stopPropagation ,return false
所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...
- jQuery中的 return false, e.preventDefault(), e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <html><head> <title></title> <script sr ...
随机推荐
- C++标准库addressof的应用
C++11将addressof作为标准库的一部分,用于取变量和函数等内存地址. 代码示例: #include <memory> #include <stdio.h> void ...
- android-基础编程-ListView
ListView主要包括view和数据源.其数据适配器列表分为三种,ArrayAdapter,SimpleAdapter和SimpleCursorAdapter. ListView的没有oom原因.经 ...
- spring启动component-scan类扫描加载,以及@Resource,postConstruct等等注解的解析生效源码
spring里IOC的原理就不详细写了, 如果想要搞清楚自动扫描组件是如何实现的,还有@Resouce @PostConstruct等注解的工作原理,最好可以先搞清楚整个IOC容器的运作原理再来分析这 ...
- htpasswd建立和更新存储用户名、密码
htpasswd建立和更新存储用户名.密码的文本文件, 用于对HTTP用户的basic认证. # /usr/local/apache/bin/htpasswd --help Usage: htpass ...
- Android-WebView与本地HTML (Java调用--->HTML的方法)-(new WebView(this)方式)
之前的博客,Android-WebView与本地HTML (Java调用--->HTML的方法),是在 findViewById(R.id.webview);,来得到WebView, 此博客使用 ...
- RouteOS 频繁自启
本来是一个美好的大周末,突然却被一个突如其来的电话把我从美梦中惊醒,然而一切还不止这么简单...... 本来刚开始了解到信息是客户的一台RouteOS设备挂了,听到这个消息时觉得自己应该可以很 ...
- STF环境搭建(ubuntu)
一,环境搭建 1. linux 一些基础的工具要有: sudo apt-get update sudo apt-get install git sudo apt-get install lib32st ...
- spring项目读取配置的demo
背景 读取配置是基础能力,研发这个模式不错,可以从不同配置中读取数据,如下图: 可以根据不同分类的文件来管理配置,然后统一在conf中配置哪些文件 package com.jwen.platform. ...
- 100道Java基础面试题
1.什么是B/S架构?什么是C/S架构 B/S(Browser/Server),浏览器/服务器程序 C/S(Client/Server),客户端/服务端,桌面应用程序 2.你所知道网络协议有那些? H ...
- MySQL 中文字符集排序
SELECT 字段名 FROM 表 ORDER BY CONVERT(字段名 USING gbk) ASC;