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

Javascript怎么禁止事件冒泡

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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

相关文章

  • 微信小程序发布新版本时自动提示用户更新的方法
  • jQuery表单插件jquery.form.js
  • 怎么用php实现支付宝支付
  • 百度统计、cnzz刷搜索词和来路链接原理,统计工具推广广告方法
  • Angular中怎么自定义视频播放器
  • 聊聊怎么将小程序项目转为uni-app项目
  • ThinkPHP5框架中Redis是如何使用和封装?
  • JavaScript字符串截取方法有哪些?
  • 完全掌握AWS S3在Laravel中的使用
  • 织梦DedeCMS时隔多年,终于更新了!(DedeCMSV5.7版下载)

文章分类

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

最近更新的内容

    • Photoshop制作渐变色导航背景
    • Photoshop制作绚丽的万花筒背景教程
    • WordPress调用站外文章解决方法
    • Photoshop制作简洁时尚的形象主页
    • 微信小程序获取设备信息api示例
    • php构造方法和java构造方法有什么区别
    • CSS实现瀑布流的两种方式
    • PHP中如何使用构造方法和this关键字?如何引入构造方法?
    • Photoshop制作针织毛绒文字效果
    • 2018最新手机号验证正则表达式方法

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

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