JS阻止冒泡出现(cancelBubble=true;与stopPropagation

案例代码:

<div onclick="viewType(this);" id="type_select_class" class="selectClass">
 <div class="title"><em>类型:</em><span id="current_type_name">全部</span></div>
    <ul class="class" id="menu_type_list">
        <li onclick="setStyleType('0','全部',event);return false;">全部</li>
        <li onclick="setStyleType('001001','可爱',event);return false;">可爱</li>
        <li onclick="setStyleType('001002','幽默',event);return false;">幽默</li>
        <li onclick="setStyleType('001003','神秘',event);return false;">神秘</li>
        <li onclick="setStyleType('007006','东方神起',event);return false;">东方神起</li>
        <li onclick="setStyleType('007007','少女时代',event);return false;">少女时代</li>
    </ul>
</div>
如上所显示,父类和子标签下都有一个onclick事件,所谓的冒泡就是,点击子类的会连带的触发父类的的事件。从而造成不想要的联动。

解决方案:

<script>
function setStyleType(style_type,sytle_name,event){
 //阻止冒泡调用parent
 var e = (event) ? event : window.event;
 if (window.event) {//IE
  e.cancelBubble=true;
 } else { //FF
  e.stopPropagation();
 }

 //继续下面的动作。。。。。。
 $("#type_select_class").removeAttr("class");
 $("#type_select_class").attr("class", "selectClass2");
 $("#current_type_name").html(sytle_name);
 getItemList();
}
</script>

[ATF]-smc指令详解 1、在ree/tee调用smc之前 2、调用smc之后,cpu触发同步异常,进入ATF的sync_exception_aarch64—>handle_sync_exception—>smc_handler64处理函数 在smc_handler64中又调用了smc_handler func smc_handler64 /* ---------------------------------------------- * Detect if this is a RUN_IMAGE or ot 阅读详情

相关推荐

Enterprise Architect 中文经典教程

本文使用到的EA工程文件下载 一、Enterprise Architect简介 Enterprise Architect是一个对于软件系统开发有着极好支持的CASE软件(Computer Aided Software Engineering)。EA不同于普通的UML画图工具(如VISIO),它将支撑系统开发的全过程。在需求分析阶段,系统分析与设计阶段,系统开发及部署等方面有着强大的支持,...

2万+

JavaScript 取消默认事件、阻止事件冒泡的方法

首先页面上创建一个a标签:<a href="#" onclick="do_Click()">默认事件</a> 然后给body加一个点击事件: document.body.onclick=function(){ alert('body'); } 当我点击这个a标签的时候会有两个我们不想发生的事情: 1.浏览器地址尾部出现 # 号,这是a标签的默认事件。 2.alert('body'); 被执行了,这是事件冒泡。 针对这两个有专门的控制方...

编程界明世隐的博客 1631

保姆级教程:用Seurat 5.0.1搞定单细胞测序数据从质控到细胞注释的全流程

本文提供了一份详细的Seurat 5.0.1单细胞测序数据分析教程,涵盖从数据质控到细胞注释的全流程。通过R代码示例和可视化分析,帮助用户掌握单细胞RNA测序数据处理的核心技术,包括数据标准化、降维聚类和细胞类型注释,适用于生物信息学研究和临床数据分析。

weixin_29067143的博客 197

js中e.cancelBubble解决事件冒泡

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #par{ width:400px;height:400px;background:

心合的博客 5715

Robot Arm 机械臂源码解析

由于我们用的是步进电机,运动的时候是一步一步的,并不是平滑的,这里假设在一个平面上面,一个x步进电机,一个y步进电机。那么放大它们所走的轨迹就会是阶梯状的。而它们也只能沿着网格运动。相当于有了一个最小的分辨率,这个分辨率就是一步。如下图所示,如果x,y电机同时走就能走出45度的斜线。在三维空间里面运动也是如此,你应该可以想象的出来;首先,是updateActualPosition,用来时时更新此时的差补位置,得到的是一个路径与时间t的函数(其中路径的范围为0,1,时间范围为0,dist/v)...

爱吃炸鸡的小猪's blog 1万+

突破III-V/硅混合集成的挑战:UTC光电探测器能带工程仿真实践

本文探讨了UTC光电探测器在III-V/硅混合集成中的能带工程仿真实践,通过Ansys Lumerical平台实现多物理场仿真,解决晶格失配和能带不连续性等关键挑战。文章详细介绍了FDTD光学仿真和CHARGE电学仿真方法,优化器件性能,提升响应度和带宽,为高速光通信和量子计算提供技术支持。

weixin_29219539的博客 295

cancelBubble = true

<br />cancelBubble = true,阻止事件由子元素向父元素冒泡。<br /> <br />什么时候用到呢?<br /> <br />比如,<div onclick="A()"><a href="b.htm">bbbbbb</a><div><br /> <br />点 bbbbbb 的时候,也会触发 A()。<br /> <br />要避免出现这种情况,可以阻止点<a>的时候,也触发父元素DIV的click事件:<br /><div onclick="A()"><a href="b.htm"

左直拳的马桶_日用桶 3085

IDEA+JRebel实现SpringBoot+MyBatis Plus项目热部署全攻略(含XML热更新实战)

本文详细介绍了如何在IDEA中使用JRebel为SpringBoot与MyBatis Plus项目配置高效的热部署方案。通过安装激活JRebel插件并配置关键扩展,重点解决了MyBatis XML映射文件修改后无法即时生效的痛点,实现了Java代码与XML文件的秒级热更新,从而彻底摆脱频繁重启应用的开发困境,大幅提升编码与调试效率。

weixin_28831341的博客 472

阻止冒泡

// 原生js document.getElementById('btn').addEventListener('click', function (event) {     event = event || window.event;     if (event.stopPropagation){         // w3c方法 阻止冒泡         event.stop

RUYIBIG的博客 298

【GlobalMapper精品教程】094:GlobalMapper26简体中文版安装教程(附安装包下载)

【GlobalMapper精品教程】094:GlobalMapper26简体中文版安装教程(附安装包下载)- 基于深度学习的图像分析工具,用于自动识别土地覆盖分类、建筑物提取和车辆检测。新的太阳阴影分析工具,用于计算加载地形和 3D 要素的阴影。新的 GENERATE_SHADOWS 脚本命令允许自动执行这些计算。新增点云模型关键点自动识别。能够在自动点云分析工具中保存和加载自定义创建的要素模型。改进了像素到点中各种潜在重叠图像中 GCP 的自动识别。

智慧空间实验室 4892

微信公众号 - 解决报错 “err_msg“:“system:access_denied“,微信环境浏览器真机使用微信支付、微信授权登录、分享朋友圈转发好友报错system:access_denied

微信公众号,微信网页,手机h5网页,微信报错,system:access_denied,微信支付,提示报错,微信登录授权报错,微信朋友圈分享,微信转发,WeixinJSBridge,微信环境下,微信内置浏览器,微信公众号项目报错system:access_denied,如何解决,invoke(),API调用后出现报错,微信内部H5 WeixinJSBridge.invoke system:access_denied,使用微信jssdk时报access_denied错误,还是报错,真机运行,真机调试api返回

🏆 前端领域优质创作者 1万+

嵌套div中点击子元素,阻止父元素事件的两种方法

嵌套div中点击子元素,阻止父元素事件的两种方法

慢慢爬 3237

MATLAB R2023a下载链接及软件安装教程

MATLAB的基本数据单位是矩阵,它的指令表达式与数学、工程中常用的形式十分相似,故用MATLAB来解算问题要比用C,FORTRAN等语言完成相同的事情简捷得多,并且MATLAB也吸收了像Maple等软件的优点,使MATLAB成为一个强大的数学软件。a是上半年,b是下半年版本,但是有些小弱们总是觉得只要是b一定功能多,这不一定的,同年版本b比a可能稍微全点,不同年的,比如21b,22a,肯定22a要比21b版本高功能多了。10、选择目标文件夹,默认的是C盘,想修改的话可以单击【浏览】,然后单击【下一步】

qq_53545309的博客 5159

Vue和Js的阻止事件冒泡和阻止默认事件方法

Vue和Js的阻止事件冒泡和阻止默认事件方法

Hello_Ajax的博客 1799

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

js阻止事件的冒泡传播

不管是内联的事件注册还是传统的事件注册亦或是addEventListener(事件句柄,回调函数,false);亦或是ie的attachEvent(事件句柄,回调);这四种中的任意一种,其事件传播机制都是冒泡传播,只有addEventListener(事件句柄,回调函数,true);的时候才是捕获(从外子内)传播。 冒泡和捕获是js事件传播的两种方式。 我们关注的是如何阻止事件的冒泡传播。先来复习一下冒泡传播的现象,有如下的html文档: <!doctypehtml> <html.

xiaozhuangyumaotao的博客 445

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

阻止事件冒泡

阻止事件冒泡的方式 行内绑定的点击事件和js绑定的点击事件阻止冒泡是不同的。 行内绑定的需要 通过window.event.cancelBubble = true 来阻止。 js绑定的无论哪一种写法需要通过e.stopPropagation() 来阻止。 <!DOCTYPE html> <html lang="en"> <he...

这个博客记录我的成长。(专注前端开发,ehcarts图表开发,接定制),有需要请站内私信。 775

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件($event.cancelBubble=true;)

要求,angular6中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> <div (click)="delete(node);$event.cancelBubble=true;"></div> </div> ...

小武的博客 2126

DOM初探(26)——取消冒泡和阻止默认事件

视频:https://ke.qq.com/course/231577?taid=3983676656552089 取消冒泡和阻止默认事件 取消冒泡 W3C标准event.stopPropagation();但不支持IE9以下版本 IE独有(谷歌也实现了)event.cancelBubble = true; 阻止默认事件 默认事件——表单提交,a标签跳转,右键...

abraham的博客 8945

event.cancelBubble=true e.stopPropagation() 取消事件处理,阻止事件

&lt;tr&gt;&lt;a href="xxx"&gt;连接&lt;/a&gt;&lt;/tr&gt; 如上结构,单击tr的时候跳转至另一页   &lt;tr style="cursor:pointer" onmouseover="this.style.backgroundColor='gainsboro'" onmouseout="this.

10年老码农 3626

js的stopPropagation()、cancelBubble、preventDefault()、return false的分析

事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> <script> $('li').click(function () { alert('点击了li'); }); $('a').click(function () { alert('点击了a'); }); </script> 当你点击a的时

waiting_area的博客 1010

JavaScript系列之事件冒泡机制简介

JavaScript系列之事件冒泡机制 DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head> <t...

Nicky's blog 5972

微信小程序中阻止冒泡方式

通常,在我们使用事件嵌套的时候会发生冒泡事件 在js中的阻止方式是 event.stopPropagation() IE10以下则是使用:event.cancelBubble =true 微信小程序中通过 <catch+事件名>意思是绑定对应事件,并阻止事件冒泡 ...

qq_44361433的博客 1140

js 阻止冒泡事件

js  阻止冒泡事件 前段时间在做项目的时候写js事件时,遇到了个问题和阻止冒泡事件有关,所以就用下面代码解决的 function stop(e){  //e.stopPropagation();   var evt = e|| window.event;      //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法      evt.s

PHP学习手记 531

js常用阻止冒泡事件

原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是...

weixin_30236595的博客 110

javascript阻止事件默认行为,阻止事件传播冒泡,兼容IE

javascript阻止事件默认行为,阻止事件传播冒泡,兼容IE 文章目录javascript阻止事件默认行为,阻止事件传播冒泡,兼容IE1:兼容写法2:禁止元素默认行为3:禁止元素事件传播冒泡 1:兼容写法 兼容ie的默认行为,事件传播: let eventUtil = { //默认行为 preventDefault:function(event){ if(event.preventDefault){ event.preventDefault() }else{ event.retu

qq_41974199的博客 1243

事件冒泡机制

目录一、单机事件冒泡机制二、如何处理事件冒泡1. e.stopPropagation()处理事件冒泡输出MouseEvent事件执行参数对象2. e.cancelBubble = true处理事件冒泡 一、单机事件冒泡机制 子父元素具有click,执行的时候会冒泡执行(由里向外执行该事件) <div id="box" style="width: 100px;height: 100px;background-color: orangered"> <button id="b.

赵佳敏的博客 596
上一篇: JAVASCRIPT弹出窗口总结
下一篇: js关于空格键的错误'\n'
iteye_16607
博客等级 码龄8年 1粉丝 124原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值