event.preventDefault()用法介绍(阻止默认事件)

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。

例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。

注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

例子:

  1. $("a").click(function (e) {
  2. alert("默认行为被禁止喽");
  3. e.preventDefault();
  4. });
  5.  
  6. <a href="http://www.baidu.com">测试</a>

event.stopPropagation()用法介绍(阻止冒泡)

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。

注意:虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

event是DOM的事件方法,所以不是单独使用,比如指定DOM

  1. <div id="A">
  2. <div id="B">
  3. </div>
  4. </div>
  5. <script>
  6. var a = document.getElementById('A'),
  7. b = document.getElementById('B');
  8. function handlera (e) {
  9. console.log(e.target);
  10. }
  11. function handler (e) {
  12. console.log(e.target);
  13. e.stopPropagation();
  14. }
  15. b.addEventListener('click', handler, false);
  16. a.addEventListener('click', handlera, false);
  17. </script>

点击B,输出:

  1. <div id="B"></div>
  1. 1 <div id="A">
  2. <div id="B">
  3. </div>
  4. </div>
  5. <script>
  6. var a = document.getElementById('A'),
  7. b = document.getElementById('B');
  8. function handlera (e) {
  9. console.log(e.target + 'a');
  10. }
  11. function handler (e) {
  12. console.log(e.target + 'b');
  13. }
  14. b.addEventListener('click', handler, false);
  15. a.addEventListener('click', handlera, false);
  16. </script>

点击B时,输出:

  1. [object HTMLDivElement]b
  2. [object HTMLDivElement]a

以上例子,不难看出stopPropagation()功能就是阻止了冒泡,上面第二个例子中,没有用这个方法阻止冒泡,当点击子元素时,由于事件冒泡,触发了父元素的click事件,所以第二个例子中会多出现一次输出内容,即为:触发A元素点击事件的输出内容。

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

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

  1. if(ret===false){
  2.    event.preventDefault();
  3.    event.stopPropagation();
  4. }

以上就是我对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. python爬虫之一:requests库

    目录 安装requtests requests库的连接异常 HTTP协议 HTTP协议对资源的操作 requests库的7个主要方法 request方法 get方法 网络爬虫引发的问题 robots协 ...

  2. C#-委派和事件

    委派代表一个方法.当不知道后面的方法名称时,可用委派先声明,待使用方法时,再在委派实例化时写入方法名称. 先声明, public delegate int delegateClassName (参数列 ...

  3. day25(令牌机制)

    令牌机制 作用:处理页面重复提交,造成数据多次写入数据库. 使用方法: 类似于验证码机制,使用session记录一个不可能重复的值(Uuid)在访问controller时对session进行校验. / ...

  4. _编程语言_C++_std

    正常使用 cout << "Count is "<<i<<endl; 含有std std::cout << "Count ...

  5. html5打开摄像头并用canvas模拟拍照 - 转

    <video id="video" width="640" height="480" autoplay></video&g ...

  6. Codeforces Round #264 (Div. 2) E. Caisa and Tree 树上操作暴力

    http://codeforces.com/contest/463/problem/E 给出一个总节点数量为n的树,每个节点有权值,进行q次操作,每次操作有两种选项: 1. 询问节点v到root之间的 ...

  7. html 语法

    p: 源代码中包含多行,但是浏览器会忽略多行 <br />产生折行效果 h1:居中用样式实现 :水平线,有的很像border-top/bottom,或许用 实现更好 pre: 预格式化的文 ...

  8. 用jquery监听输入数字的变化

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. SRM471

    250pt: 题意:定义一种函数f(x),表示x不断/2直到出现非素数的操作次数.现在给定N,D.求X<= N, 并且f(x) >= D的最大的数 思路:直接先弄一个1000w以内的质数表 ...

  10. hdu 3910 Liang Guo Sha

    题目链接:hdu 3910 Liang Guo Sha 题目大意:Alice和Bob这两个小伙伴又发明了一种新游戏, 叫两国杀, 每个人手上有两张牌,“杀” 和“闪”, 然后有三个数值A,B和C, 当 ...