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>

从零构建AI辅助逆向分析环境:JADX-MCP与LLM的实战集成指南 本文详细介绍了如何从零构建AI辅助逆向分析环境,通过集成JADX-MCP与LLM技术,提升Android应用逆向工程效率。文章涵盖环境搭建、插件安装、MCP服务器配置及实战案例分析,帮助开发者快速掌握AI在代码理解、漏洞挖掘和自动化文档生成中的应用。 阅读详情

相关推荐

Bentley ORD(openroads designer) 二次开发(BIM)第七节 在ORD SDK中调用MicroStation SDK

从课程刚开始的时候我们就通过学习,了解了ORD的开发是基于MicroStation的,ORD SDK的接口发布的时候也对MicroStation SDK也做了一次发布。这一章将以我们对ORD SDK知识的了解为基础,使用ORD SDK的接口读取道路几何信息、计算桩号,然后再使用MicroStation SDK 读取地形数据和计算投影点的位置,并创建一组方柱形状的Soild。计算方柱底部坐标要经过两大步骤,通过路线的桩号及偏移距离去定位方柱的平面位置,通过方柱的平面位置计算数字地面模型上的投影点的坐标。

chen286990651的博客 880

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

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

编程界明世隐的博客 1631

【RK3588开发记录】超详细的RK3588修改debug串口波特率为115200

修改RK3588的debug串口为115200

Crazydrams的博客 4804

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

AI图像识别在临电配电箱安全检测中的应用与实践

计算机视觉与AI图像识别技术正逐步改变传统工业检测方式。通过深度学习模型如YOLOv5和ResNet,系统能自动识别设备元件并分析其状态,大幅提升检测效率和准确性。这种技术特别适用于需要严格遵循行业标准的场景,如临电配电箱的安全检测。将《施工现场临时用电安全技术规范》等条文转化为可量化的算法,AI系统能自动检查PE线连接、漏保功能等关键项目。实际应用表明,此类解决方案可使电气事故率下降90%以上,同时检测耗时缩短80%,为工地安全提供了智能化保障。

weixin_29042035的博客 328

以太网接口及POE设计

PoE标准 Power Over Ethernet 是有源以太网供电的简称 通过Cat-5电缆供电在IEEE 802.3af以太网供电标准中进行了定义。PoE标准以前限制在几瓦以内,但更新的PoE技术可实现更高的功率。例如,PoE+允许每端口功率高达25 W,而PoE++(四 对以太网供电系统)通过使用现有电缆的所有电线允许70 W到100 W的功率。与此PoE标准并行的是ADI公司定义的专有标准 LTPoE++™,该标准定义高达90W的受电设备(PD)功率规范(请参见表1)。 表1. ADI...

u010783226的专栏 1万+

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

Windows下OpenMBEE项目MMS部署失败经历及改正

在Github里找到了上面的第一份文档,下载了MMS源代码(不知道为什么这个代码跟上面操作克隆得到的MMS代码不一样?好像是因为Gradle的版本问题,我本地之前已经安装过7.6.4的Gradle了,于是我找到gradle-wrapper.properties文件。后面在VScode中运行了一下依然是报这个错误,我在VScode终端直接执行。不知道为什么依然没什么用。打开“Windows PowerShell”。(如果是第一次运行它,将看到更长的输出)导航到要克隆存储库的文件夹,例如,

Yo_lan_da的博客 1868

阻止冒泡

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

RUYIBIG的博客 298

OpenCLI入门:让任何网站变成你的命令行工具(超详细版)

最有用的工具,往往是最简单的。 opencli就是这样。 它不会帮你写代码,不会帮你做决策,但它能把200+个平台装进你的命令行。 让你用最简单的方式,获取最丰富的数据。

weixin_66295112的博客 2090

ERA5气象数据下载与解压全攻略:Python脚本一键搞定(附错误处理技巧)

本文提供了一套完整的ERA5气象数据自动化处理方案,涵盖从CDS API配置、智能批量下载到高效解压与数据验证的全流程。重点介绍了如何通过Python脚本实现一键式数据下载与批量解压,并分享了实用的错误处理技巧与性能优化策略,帮助科研人员高效获取和处理大规模气象数据。

k8l9m0n的博客 337

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

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

慢慢爬 3237

Java零基础之多线程篇:线程间如何通信?

随着计算机技术的发展,多线程编程已经成为现代软件开发中的一个重要方向。在多线程编程中,线程间的通信是一个非常关键的问题。在Java开发语言中,Java提供了一些机制来实现线程间的通信,帮助开发者协调不同线程之间的执行顺序和数据交换。本文将介绍Java多线程编程中的线程间通信的相关知识。首先,我们将从简介开始,介绍线程间通信的基本概念和原理。然后,我们将通过源代码解析的方式,深入探讨Java中实现线程间通信的方法。接着,我们将给出一些应用场景案例,展示线程间通信在实际开发中的应用。

喵手的博客 1558

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

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

Hello_Ajax的博客 1799

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

js阻止事件的冒泡传播

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

xiaozhuangyumaotao的博客 445

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

阻止事件冒泡

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

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

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

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的博客 8944

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、付费专栏及课程。

余额充值