• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Javascript怎么禁止事件冒泡

Javascript怎么禁止事件冒泡

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Javascript,禁止事件冒泡等相关知识,希望对您有所帮助

方法:1、利用stopPropagation()方法禁止,但不会阻止默认行为,语法“event.stopPropagation()”;2、利用return方法禁止,同时阻止默认行为,语法“function(){return false}”。


Javascript怎么禁止事件冒泡


javascript怎么禁止事件冒泡

原生 JS 中,对事件对象 (event) 有 2 种主要的方法;

stopPropagation 和 preventDefault

第一个是禁止冒泡,第二个是阻止默认行为

注:这是原生 JS 的方法,并非 jQuery 的方法,event 形参可以为任何变量,比如用 e 这个也可以的;

ele.onmouseover=function(event){    event=event||window.event;    if(event.stopPropagation){        event.stopPropagation();//标准留言器中禁止冒泡;        // preventDefault中文意思是阻止默认行为;    }else{        e.cancelBubble=true;//IE浏览器禁止冒泡;IE678    }}


1、事件的禁止冒泡

ele.onmouseover=function(event){    event=event||window.event;    if(event.stopPropagation){        event.stopPropagation();//标准留言器中禁止冒泡;        // preventDefault中文意思是阻止默认行为;    }else{        e.cancelBubble=true;//IE浏览器禁止冒泡;IE678    }}


2、return 的阻止

ele.onmouseover=function(){    return false}

区别。

return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。

event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

整理:

1.event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(可执行超链接的跳转)

2.return false;

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(不执行超链接的跳转)

还有一种有冒泡有关的:

event.preventDefault();

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一起来聊聊JavaScript函数柯里化
  • 在javascript中,NaN是什么类型?
  • javascript调试之console.table()
  • Javascript中常见的内置对象有哪些
  • Javascript怎么实现字符串替换星号
  • 解决JavaScript中数组排序sort不发生改变
  • Javascript怎么实现红绿灯
  • 两行 Javascript 代码生成 UUID的方法
  • Javascript怎么实现四位随机验证码
  • javascript怎么判断是否为null

相关文章

  • 2022-04-29实现php页面自动跳转的方法有哪些
  • 2022-04-29css中实现背景透明的三种方式
  • 2022-04-29PHP怎么删除最后一个字符
  • 2022-04-29小程序怎么查看base64图片
  • 2022-04-29WordPress引入Dplayer并使用简码
  • 2022-04-29两分钟带你了解在CSS中三种使图片居中的方法
  • 2022-04-29帝国CMS函数版首页、列表页、内容页调用TAG标签终级教程
  • 2022-04-29使用CorelDRAW绘制椭圆和圆形
  • 2022-04-29Photoshop设计端午节绿色艺术字教程
  • 2022-04-29Photoshop绘制颓废风格的玻璃球教程

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 织梦cms内容页调用评论数量的方法
    • 通过实例来了解Laravel中管道的使用方法
    • 分享TP6框架中Redis操作服务类的记录
    • vue中query和params的区别是什么
    • 浅析小程序中如何优雅地进行模块化处理?
    • vue仿携程轮播图效果(滑动轮播,下方高度自适应)
    • WordPress调用站外文章解决方法
    • PHP怎么遍历数组替换数组中的元素的值
    • 判断是否为jquery对象使用什么运算符
    • Photoshop制作质感金属文字效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有