我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧

跟冒泡事件相关的,我想到三个:

1、event.stopPropagation():阻止冒泡事件,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个链接,这个链接仍然会被打开;

2、event.preventDefault():阻止默认事件,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

3、return false:这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,链接不会被打开,事件也不会传递到上一层的父元素,可以理解为 return false 就等于同时调用了event.stopPropagation()和event.preventDefault()。

event.stopPropagation()和event.preventDefault(),return false的区别的更多相关文章

  1. 【前端】stopPropagation, preventDefault, return false的区别

    e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...

  2. 原生js中stopPropagation,preventDefault,return false的区别

    1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div") ...

  3. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  4. event.stopPropagation(),event.preventDefault()和return false的区别

    event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...

  5. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  6. event.stopPropagation()、event.preventDefault()与return false的区别

    做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...

  7. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  8. event.stopPropagation()和event.preventDefault()

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  9. vue 中 event.stopPropagation() 和event.preventDefault() 使用

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...

随机推荐

  1. AttributeError: 'dict' object has no attribute 'status_code'

    前端AJAX请求数据,提示错误:“AttributeError: 'dict' object has no attribute 'status_code'”. 原因:是提示返回对象dict没有“sta ...

  2. Linux 下面根据端口号 查询 可执行程序的路劲的方法

    1. 安装上lsof 的包 2. 使用 lsof 命令查看相关进程 lsof -i: 效果为: 3. 根据/proc 的目录查看可执行目录的文件位置 ll /proc/procid # procid ...

  3. Hive Error : Java heap space 解决方案

    Java heap space问题一般解决方案: 设置 set io.sort.mb=10; 排序所使用的内存数量,默认值是100M,和mapred.child.java.opts相对应,opts默认 ...

  4. springboot笔记之helloworld

    开发工具:IDEA 2019 springboot版本:2.1.9 一.springboot2.x VS 1.x 基础环境升级 最低 JDK 8,支持 JDK 9,不再支持 Java 6 和 7 依赖 ...

  5. Zookeeper 和Eureka比较

    作为服务注册中心,Eureka比Zookeeper好在哪里著名的CAP理论指出,一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性).由于分区容错性P在是分布式系统中必须要保证的, ...

  6. css overflow规定元素溢出框将会发生什么

  7. Android-Widget桌面小组件

    1, 掌握Widget的用:Widget的用途,能够添加到手机桌面的程序 2, Widget的特点和用法步骤: 特点:快捷,方便,个性化,可自定义功能,可及时控制更新Widget显示内容 3, 用法步 ...

  8. Python爬虫之简单的爬取百度贴吧数据

    首先要使用的第类库有 urllib下的request  以及urllib下的parse  以及 time包  random包 之后我们定义一个名叫BaiduSpider类用来爬取信息 属性有 url: ...

  9. P1398 [NOI2013]书法家

    传送门 就是个普及组 $dp$ 合集,把 $NOI$ 从左到右拆成 $9$ 个部分,每个部分都可以分别 $dp$ 除了 $N$ 的中间部分比较恶心以外其他都还好,自己推一下然后就知道转移,就 $N$ ...

  10. JavaSE--类与对象

    一.类 类是具有相同特性(数据元素)和行为(功能)的对象的抽象就是类.因此,对象的抽象是类,类的具体化就是对象,也可以说类的实例是对象,类实际上就是一种数据类型.类具有属性,它是对象的状态的抽象,用数 ...