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

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

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. XSS跨站简析

    XSS跨站脚本原理 当应用程序发送给浏览器的页面中包含用户提交的数据,但没有经过适当验证或转义时,就会导致跨站脚本漏洞 这个“跨”实际上属于浏览器的特性,而不是缺陷 (参考:浏览器同源策略) 不去直接 ...

  2. java 不可变对象 final Collections guava 简单样例

    本地环境 jdk1.8 连接 Google Guava官方教程(中文版) journaldev 说明 java的final关键字大家都了解,但是final修饰的如果是引用类型,那么不可修改的其实只是重 ...

  3. python​日记:优化(SEO)狗学Python的日子(1)

    一名优秀的程序员,在穿越单行道时也会确认双向的来车情况 ——道格拉斯.林德(Doug Linder) 大家可能好奇Python是什么东东,今天是小猿开始学习Python的第一天.周五在公司的时候收到了 ...

  4. Ubuntu下Win10虚拟机卡顿问题解决

    问题描述 Ubuntu下用VMware创建了一个Windows10的虚拟机,初始给的配置如下: Memory: 4GB Graphics Memory: 1GB Hard Disk: 60GB 用的时 ...

  5. NSIS打包软件使用

    NSIS打包软件使用 最近做的一个调用远程桌面的小应用需要打个安装包,并且在安装的时候需要添加注册表,我之前使用的都是"Advanced Installer"来打包应用程序的,这个 ...

  6. Linux文档整理之【Jenkins+Docker自动化部署.Net Core】

    这次整理的文档是Jenkins+Docker实现自动化部署,很早之前就写的,今天有时间就搬到博客园做个记录. Jenkins是基于Java开发的一种持续集成工具,主要用于持续.自动的构建/测试软件等相 ...

  7. 移除数组中指定键(Yii2)

    /** * 移除数组中指定key * @param $data * @param $key * @return array */ public static function removeKey($d ...

  8. 简单告诉你-"border:0"与"border:none"的区别

    "border:0"与"border:none"的差异主要体现在性能差异和兼容差异.1.性能差异"border:0"表示把border定义为 ...

  9. vue学习【番外篇】vue-cli脚手架的安装

    大家好,我是一叶,今天和大家分享的是vue-cli脚手架的安装,关于vue-cli的优点,我就不赘述了. 一.检查安装node 安装vue-cli之前,先检查node是否安装.win+R,输入cmd打 ...

  10. redis、rabitmq对比

    redis.rabitmq对比 原文地址 简要介绍 RabbitMQ RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性 ...