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元素点击事件的输出内容。

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

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

 if(ret===false){
   event.preventDefault();
   event.stopPropagation();
}

以上就是我对preventDefault与stopPropagation的了解,有很多的不足,请大家多多指出,多多留言,谢谢!!!

深入了解preventDefault与stopPropagation的更多相关文章

  1. js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...

  2. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  3. js中的preventDefault和stopPropagation

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:      preventDefault方法的起什么作用呢?我们知道比如<a href=" ...

  4. javascript中间preventDefault与stopPropagation角色介绍

    preventDefault的作用是什么方法,它? 我们知道,例如,<a href="http://www.baidu.com">百度</a>,这是html ...

  5. preventDefault 和 stopPropagation

    概述 以前开发项目的时候,总是分不清楚 preventDefault 和 stopPropagation,每次都是用 @click.stop试一下,不能就用@click.prevent试一下.今天来好 ...

  6. e.preventDefault() e.stopPropagation()和return false的区别

    e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...

  7. JS preventDefault ,stopPropagation ,return false

    所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...

  8. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

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

    e.stopPropagation()阻止事件冒泡 <html><head>     <title></title>     <script sr ...

随机推荐

  1. issubclass ,isinstance,反射

    issubclass() 函数 issubclass() 方法用于判断参数 class 是否是类型参数 classinfo 的子类. 语法 以下是 issubclass() 方法的语法: issubc ...

  2. 引用数据类型(Scanner类、Random类)

    Scanner类 Scanner类是引用数据类型的一种,我们可以使用该类来完成用户键盘录入,获取到录入的数据. 引用数据类型的使用 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固 ...

  3. C#期末大作业 消消乐 2017-06-01 18:11 275人阅读 评论(0) 收藏

    邻近期末,忙于刷题之余意识到期末大作业来不及了,匆匆赶下了作业,虽说做的很是粗糙,但完全原创的 下载链接 https://pan.baidu.com/s/1cCNLr4 大体的做大约3天完成了: 第一 ...

  4. POJ3046选蚂蚁创建集合_线性DP

    POJ3046选蚂蚁创建集合 一个人的精力是有限的呢,如果一直做一件事迟早会疲惫,所以自己要把握好,不要一直埋头于一件事,否则效率低下还浪费时间 题目大意:一共有T(1,2...n为其种类)种蚂蚁,A ...

  5. python学习之高阶函数

    filter函数:filter()为已知的序列的每个元素调用给定的布尔函数,调用中,返回值为非零的元素将被添加至一个列表中 list = filter(调用函数名,可迭代对象)——调用函数名自动传参— ...

  6. [au3]复制选择性粘贴文本到excel

    案例:在一张网页上有许多你要复制的内容,但是你必须一个一个找到他们,然后一个一个复制出来粘贴到excel表格里.时间一长你的眼睛容易花,而且复制多了容易出错. 方法:当然有许多方法可以自动化的做这一件 ...

  7. java 堆排序的实现

    堆就是一个完全二叉树,堆要求是指 该节点大于它的两个子节点.而两个字节点大小不一定. 堆排序的最坏时间复杂度为nlog(n),平均也为nlog(n),占用空间为o(1),是一种比较排序算法. 堆排序也 ...

  8. MVC框架json数据展示程序(第一版)

    模型原型:服务器的配置和运行状态信息. 设计要求:Json格式数据解析后,判断配置信息是否是新数据或者是否更新.如是新数据,则直接添加到数据库:若是数据更新,则更新数据库配置信息并更新运行状态信息:都 ...

  9. Bs4 BeautifulSoup取值

    原文网址:https://blog.csdn.net/u010244522/article/details/79627073 从网页获取HTML数据后,获取对应标签.属性的值 取值方法主要有以下几种: ...

  10. 31_网络编程-struct

    一.struct   1.简述  我们可以借助一个模块,这个模块可以把要发送的数据长度转换成固定长度的字节.这样客户端每次接收消息之前只要先接受这个固定长度字节的内容看一看接下来要接收的信息大小,那么 ...