javascript的阻止默认事件和阻止冒泡事件

时间:2023-01-25 15:29:39

这两个方面的知识,在妙味课堂中有听过,再次复习一下:

原文来自:【http://www.cnblogs.com/Essence/p/4266618.html】

事件冒泡与默认行为

 

在说事件冒泡之前,我们先说说事件对象(Event)

Event

  1. 在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)
  2. 所有浏览器都支持Event对象,但支持方式不同
  3. IE中的事件对象:window.event
javascript的阻止默认事件和阻止冒泡事件
     /*
封装Event对象
IE:window.event
*/
function getEvent(event){
return event?event:window.event;
}
javascript的阻止默认事件和阻止冒泡事件

  

事件冒泡

  1. 什么是事件冒泡
    1. 即事件开始时由最具体的元素(文档中嵌套最深的那个元素)接收,然后逐级向上传播到较不为具体的节点
    2. 所有浏览器都支持事件冒泡
      javascript的阻止默认事件和阻止冒泡事件
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>事件冒泡</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <link href="" rel="stylesheet">
      <style>
      .one{
      width:400px;
      height:100px;
      border:1px solid #333;
      }
      .two{
      height:35px;
      line-height:35px;
      padding-left:15px;
      border:1px solid red;
      }
      .three{
      padding:10px;
      background-color: green;
      border:1px solid #999;
      cursor:pointer;
      }
      </style>
      <script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script>
      $(function(){
      $(".one").click(function(event) {
      alert($(this).text());
      });
      $(".two").click(function(event) {
      alert($(this).text());
      });
      $(".three").click(function(event) {
      alert($(this).text());
      });
      });
      </script>
      </head>
      <body>
      <div class="one">
      我是one(div)
      <p class="two">
      我是two(p)
      <span class="three">我是three(span)</span>
      </p>
      </div>
      </body>
      </html>
      javascript的阻止默认事件和阻止冒泡事件

      当在span、p、div元素上各绑定一个click事件,当单击span元素时,会依次触发三个事件,即span、p、div元素上的click事件,这就是事件冒泡,按照DOM层次结构像水泡一样不断向上直至顶端

  2.   阻止事件冒泡
    1. DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数中调用就行
    2. IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用
      1. javascript的阻止默认事件和阻止冒泡事件
        /*
        封装事件冒泡函数:
        document.all:判断浏览器是否是IE
        IE:cancelBubble
        Firefox:stopPropagation
        */
        function stopPropagation(e){
        var e = window.event || e;
        if(document.all){
        e.cancelBubble = true;
        }else{
        e.stopPropagation();
        }
        }
        javascript的阻止默认事件和阻止冒泡事件
    3. jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();

默认行为

  1. 什么是默认行为
    1. 网页元素,都有自己的默认行为,例如,单击超链接会跳转...
  2. 阻止默认行为
    1. DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行
    2. IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用
    3. javascript的阻止默认事件和阻止冒泡事件
      /*
      封装阻止元素的默认行为函数
      IE:returnValue
      DOM:preventDefault
      */
      function preventDefaultAction(event){
      var event = window.event || event;
      if(document.all){
      //支持IE
      event.returnValue = false;
      }else{
      //IE不支持
      event.preventDefault();
      }
      }
      javascript的阻止默认事件和阻止冒泡事件
    4. jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()
  3. 如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

javascript的阻止默认事件和阻止冒泡事件的更多相关文章

  1. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  2. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  3. jQuery阻止默认行为和阻止冒泡

    1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); &lt ...

  4. JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

    return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...

  5. js 冒泡事件与解决冒泡事件

    事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window . html代码: <div id="div1"> <div id= ...

  6. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 &num; )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  7. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  8. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  9. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  10. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

随机推荐

  1. Yii2 AR find用法 &lpar;2016-05-18 12&colon;06&colon;01&rpar;

    Yii2 AR find用法 (2016-05-18 12:06:01) 转载▼     User::find()->all();    返回所有数据   User::findOne($id); ...

  2. Overengineering

    https://en.wikipedia.org/wiki/Overengineering Overengineering (or over-engineering) is the designing ...

  3. Java异常错误的面试题及答案

    1) Java中什么是Exception? 这个问题经常在第一次问有关异常的时候或者是面试菜鸟的时候问.我从来没见过面高级或者资深工程师的 时候有人问这玩意,但是对于菜鸟,是很愿意问这个的.简单来说, ...

  4. (原)Ubuntu16 中安装torch版的cudnn

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5668471.html 参考网址: https://devtalk.nvidia.com/default ...

  5. 元素的BFC特性与自适应布局

    一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...

  6. js的join和split

    1,split   将字符串转为数组 第一个参数必须,可以是字符串和正则表达式,表示从该地方开始分割字符串:第二个参数可选,表示返回数组的最大长度. split():把整个字符串塞入一个数组中 spl ...

  7. gitlab配置通过smtp发送邮件(QQ exmail腾讯企业为例)

    gitlab配置通过smtp发送邮件(QQ exmail腾讯企业为例) 首先祭出官网文档链接:https://docs.gitlab.com/omnibus/settings/smtp.html 其实 ...

  8. Unix环境高级编程&lpar;十七&rpar;网络IPC套接字

    通过网络套接字可以使得不同计算机上运行的进程相互通信. 1.创建套接字 #include <sys/socket.h> Int socket( int domain, int type, ...

  9. 不使用C&plus;&plus; 11的整数转字符串

    蓝桥杯不支持C++11,那么to_string方法就用不了了.C语言提供了一种方法. 首先需要头文件 #include <sstream> 然后进行下面的操作就可以,缺点就是比较耗时. # ...

  10. 07、Spark集群的进程管理

    07.Spark集群的进程管理 7.1 概述 Spark standalone集群模式涉及master和worker两个守护进程.master进程是管理节点,worker进程是工作节点.spark提供 ...