热门标签 | HotTags
当前位置:  开发笔记 > 开放平台 > 正文

js阻止默认事件与js阻止事件冒泡示例分享js阻止冒泡事件_基础知识

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧
1. event.preventDefault(); -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,

button,radio等表单元素的默认事件 ,

p 元素没有默认事件

例:

代码如下:


百度

代码如下:


var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。


2. event.stopPropagation(); -- 阻止元素冒泡事件

注:嵌套元素一般都存在冒泡事件,会带来某些影响

例:

代码如下:







这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

给input注册click事件,同时阻止它的冒泡事件

代码如下:


document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

OK!!!了

推荐阅读
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
  • 博主从零开始学习HTML(入门基础)
    从零开始学习HTML(入门基础)互联网三大基石HTTP协议URL:统一资源定位符HTML:超文本标记语言HTML的Head标签中的常用元素<!--告知 ... [详细]
  • 本文详细介绍如何通过Anaconda 3.5.01快速安装TensorFlow,包括环境配置和具体步骤。 ... [详细]
  • 基于花生壳域名的Android与ESP8266远程控制系统搭建
    本文介绍了一种使用Android设备、ESP8266模块及路由器,结合花生壳动态域名解析服务实现远程控制的方法。通过该方法,用户能够有效解决因公网IP变动导致的连接问题,实现稳定可靠的远程控制。 ... [详细]
  • 新萝卜Ghost Xp Sp3 装机版
    新萝卜GhostXpSp3装机版XLB_201305ZJB.iso大小:901457920字节MD5:EBE33B7DB119CF2D0B1D79F8F0FC22BFSHA1:0 ... [详细]
  • 随着5G、云计算、人工智能、大数据等新技术的广泛应用,人们的生活生产方式发生了深刻变化。从人际互联到万物互联,数据存储与处理需求激增,推动了数据与算力设施的发展。 ... [详细]
  • 中国高铁首次海外项目启动,最高设计时速达350公里;支付宝推出新功能,支持向微信和QQ好友转账。 ... [详细]
  • 探索Python编程的价值与应用
    本文探讨了学习Python的重要性和广泛的应用场景,从个人技能提升到职业发展的多个方面进行了详细解析。 ... [详细]
  • MySQL 8.0 安装指南与配置详解
    通过参考多个在线教程,成功完成了MySQL 8.0的安装过程,并在此基础上撰写了一篇详细的安装与配置指南,旨在帮助更多初学者顺利完成MySQL的安装。 ... [详细]
  • 持续集成概述与实践指南
    本文探讨了持续集成(CI)的基本概念、目的及其在现代软件开发中的应用。通过实例分析,帮助读者理解如何有效实施持续集成,提高软件开发效率。 ... [详细]
  • 深入探讨jQuery中的事件处理、动画效果及表单操作
    本文详细介绍了jQuery这一流行的JavaScript库在事件处理、动画效果实现以及表单操作方面的应用。通过具体的示例和代码片段,帮助开发者更好地理解和运用jQuery的强大功能。 ... [详细]
  • 串行与并行加法器的逻辑设计与性能分析
    本文详细探讨了串行加法器和并行加法器的设计原理及其性能特点。通过对比分析两种加法器的工作机制,深入讨论了它们在不同应用场景下的优劣,特别是关于进位处理的不同策略。文章还介绍了进位链的概念及其对加法器性能的影响。 ... [详细]
  • 尽管Hao123.com界面简单,甚至被一些技术精英所轻视,但它却是全球访问量最大的中文网站之一。本文详细讲述了百度如何收购这一看似不起眼的网站,并探讨了其背后的商业逻辑。 ... [详细]
  • 本文总结了在使用HTML5 Canvas进行开发时常见的错误及其解决方案,帮助开发者避免常见的陷阱,提高开发效率。 ... [详细]
  • 本文详细探讨了数据仓库中常见的四种事实表类型:事务事实表、周期性快照事实表、累积快照事实表以及无事实的事实表,并提供了关于如何处理不同类型的度量指标的专业建议。 ... [详细]
author-avatar
刘莉长
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有