开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

防止单击标签触发子按钮

基础概念

在前端开发中，防止单击父元素（如标签）时触发子元素（如按钮）的事件，通常涉及到事件冒泡（Event Bubbling）的概念。事件冒泡是指事件从最深的节点开始，逐级向上传播到根节点的过程。

相关优势

用户体验：避免用户在点击父元素时意外触发子元素的操作，提高用户体验。
功能控制：精确控制事件的触发范围，确保某些操作只在特定条件下执行。

类型

阻止事件冒泡：通过 JavaScript 阻止事件从子元素冒泡到父元素。
条件判断：在父元素的事件处理函数中添加条件判断，确保只有在满足特定条件时才执行操作。

应用场景

表单控件：在表单中，防止点击标签时触发输入框的聚焦事件。
菜单和导航：在复杂的菜单或导航结构中，防止点击父菜单项时触发子菜单项的操作。
弹窗和对话框：防止点击弹窗或对话框的外部区域时关闭弹窗。

问题及解决方法

问题描述

当用户点击一个标签时，会意外触发其内部的子按钮的点击事件。

原因

事件冒泡导致父元素的事件处理函数被触发。

解决方法

使用 JavaScript 阻止事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防止单击标签触发子按钮</title>
</head>
<body>
    <div id="parent">
        <button id="child">点击我</button>
    </div>

    <script>
        document.getElementById('parent').addEventListener('click', function(event) {
            // 阻止事件冒泡
            event.stopPropagation();
        });

        document.getElementById('child').addEventListener('click', function() {
            alert('子按钮被点击');
        });
    </script>
</body>
</html>

参考链接

MDN Web Docs: Event Bubbling

通过上述代码，当用户点击父元素（#parent）时，事件不会冒泡到子元素（#child），从而避免了意外触发子按钮的点击事件。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读： 1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时，使用了...$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中...--子组件--> import popup from "@/components...moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } 子组件

6K5 0

AngularDart Material Design 菜单顶

单击按钮时菜单会扩展，当选择项目或单击下拉菜单外的区域时，菜单会关闭。 Inputs: ariaLabel String 按钮触发器的Aria标签。...buttonText String 触发按钮文本。如果MenuModel有图标，则忽略。...closeMenuOnClick bool 如果为true，则在菜单打开时单击触发按钮将关闭材质菜单。否则，在菜单已打开时单击触发按钮将不会执行任何操作。...trigger Stream 触发菜单按钮时输出事件。...如果项目具有没有空项目组的子菜单，则会通过单击或悬停显示菜单。 naviId String 内部使用的ID。

2K2 0

事件对象的使用、属性和方法

1 event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素 2 target属性可以是注册事件时的元素或者子元素，通常用于比较event.target...左边）与（顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 7 event.preventDefault()阻止默认行为，在执行这个方法后，如果点击一个链接（a标签...浏览器不会跳转到新的 URL 去，可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了 8 event.stopPropagation()阻止事件冒泡，为防止事件冒泡到...DOM树上，也就是不触发的任何前辈元素上的事件处理函数 9 event.which获取在鼠标单击时，单击的是鼠标的哪个键 10 event.which 将 event.keyCode 和...event.charCode 标准化了，event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3 11 event.currentTarget

1.5K3 0

JQuery

-- 需求：按钮 div，按钮单击控制div隐藏 display:none style --> 按钮 <...() .prevAll() 选中某个属性 = 某个值的标签，只要键值对存在 $('img[alt=aa]').css('background','green') 下面的环境都是父子集 has选中了谁的子级是...和mouseleave事件指定处理函数 mouseover()鼠标进入（进入子元素也触发） mouseout()鼠标离开（离开子元素也触发） mouseenter()鼠标进入（进入子元素不触发） mouseleave...()鼠标离开（离开子元素不触发）上面的这些鼠标移入和离开，触发和不触发指的是不再次触发父级。...验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。 <!

7.7K2 0

FL Studio21最新中文版本全新功能详细介绍

添加音轨（Adding tracks）-在播放列表剪辑焦点区域新增一个 [+] 按钮，通过左键和右键单击选项添加乐器和音频音轨。...04通道机架通道按钮（单击右键）Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器（改进）标签（Tags）-单击标签（底部）打开更多选项。偏好（Favoriting）-单击鼠标切换内容上的星号。...将完整路径显示为筛选项的提示定位文件（Locate file）-右键单击文件选项，在系统文件浏览器中突出显示标签（Tags）-可以（右键单击）删除标签。...Soundfont Player-增加了一个“程序模式”选项，以确定如何触发Patcher（补丁）。

3.7K2 0

如何在 Google 跟踪代码管理器 (GTM) 中安装 Matomo 跟踪？

单击左侧菜单中的“标签”。单击标签部分右上角的“新建”按钮添加新标签。单击“标签配置”以选择标签。将弹出一个包含所有可用标签的窗口，在此处单击“在社区模板库中发现更多标签类型”链接。...向下滚动并单击“触发”。选择“所有页面”以在所有页面上触发 Matomo 跟踪标签。单击“保存”。单击“预览”按钮预览您的更改。检查 Matomo 标签是否按预期触发。...单击“提交”按钮，然后单击右上角的“发布”按钮，发布您的更改。...将此 JavaScript 跟踪代码粘贴到标签配置 HTML 字段中。向下滚动并单击“触发”。选择“所有页面”以在所有页面上触发“Matomo 跟踪标签”。单击“保存”。...单击“预览”按钮预览您的更改。检查 Matomo 标签是否按预期触发。单击“提交”按钮，然后单击右上角的“发布”按钮，发布您的更改。恭喜！

3993 0

最新版水果FL Studio21新版本更新全解析！80项更新与改进！

添加音轨（Adding tracks）-在播放列表剪辑焦点区域新增一个 [+] 按钮，通过左键和右键单击选项添加乐器和音频音轨。...04通道机架通道按钮（单击右键）Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器（改进）标签（Tags）-单击标签（底部）打开更多选项。偏好（Favoriting）-单击鼠标切换内容上的星号。...将完整路径显示为筛选项的提示定位文件（Locate file）-右键单击文件选项，在系统文件浏览器中突出显示标签（Tags）-可以（右键单击）删除标签。...Soundfont Player-增加了一个“程序模式”选项，以确定如何触发Patcher（补丁）。

3.4K3 0

5、React组件事件详解

" onClick={this.onReactChildClick}>子元素单击事件触发 ) } } export default...ReactEvent 通过设置原生事件绑定为冒泡阶段调用，且每次测试单击子元素按钮：在子元素原生事件程序中阻止事件传播，则打印出：子元素原生事件绑定事件触发；在父元素元素事件程序中阻止事件传播...，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发在子元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发在父元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发子元素React合成事件绑定事件触发...父组件React合成事件绑定事件触发可以看到若不阻止事件传播每次（单击子元素）事件触发流程是： Document->子元素（原生事件触发）->父元素（原生事件）->回到Document->React

3.7K1 0

在 React 16 中从 setState 返回 null 的妙用

可以通过单击按钮来选择或切换 mocktail。这时会加载一个新的 mocktail，并在加载完成后渲染出这个 mocktail 的图像。...例如每当单击 Mojito 按钮时，我们都会看到程序对 Mojito 图像进行了不必要地重新渲染。...React 16 对状态性能进行了改进，如果新的状态值与其现有值相同的话，通过在 setState 中返回 null 来防止来触发更新。 ?...现在单击按钮仍会加载其各自的 mocktail 图像。...但是，如果我们再次单击同一个mocktail按钮，React 不会重新渲染 Mocktail 组件，因为 setState 返回 null，所以状态没有改变，也就不会触发更新。

14.5K2 0

笔记35-JavaScript高级

使用innerHTML属性修改标签体内容事件简单学习 * 功能：某些组件被执行了某些操作后，触发某些代码的执行。...直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件 2....设置属性 * Node：节点对象，其他5个的父对象 * 特点：所有dom对象都可以被认为是一个节点 * 方法： * CRUD dom树： * appendChild()：向节点的子节点列表的结尾添加新的子节点...事件监听机制： * 概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如：按钮文本输入框......当事件源上发生了某个事件，则触发执行某个监听器代码。 * 常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2.

1.3K3 0

前端基础-JavaScript(二)

使用innerHTML属性修改标签体内容事件简单学习 * 功能：某些组件被执行了某些操作后，触发某些代码的执行。...直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件 2....设置属性 * Node：节点对象，其他5个的父对象 * 特点：所有dom对象都可以被认为是一个节点 * 方法： * CRUD dom树： * appendChild()：向节点的子节点列表的结尾添加新的子节点...事件监听机制： * 概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如：按钮文本输入框......当事件源上发生了某个事件，则触发执行某个监听器代码。 * 常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2.

1.5K1 0

深入JavaScript之BOM、DOM和事件

2. setAttribute()：设置属性 Node：节点对象，其他5个的父对象特点：所有dom对象都可以被认为是一个节点方法 CRUD dom树： appendChild()：向节点的子节点列表的结尾添加新的子节点...事件监听机制概念概念：某些组件被执行了某些操作后，触发某些代码的执行。事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了事件源：组件。如：按钮文本输入框… 监听器：代码。...当事件源上发生了某个事件，则触发执行某个监听器代码。常见的事件点击事件 onclick：单击事件 ondblclick：双击事件焦点事件 onblur：失去焦点 onfocus:元素获得焦点。...表单事件 onsubmit 确认按钮被点击。 onreset 重置按钮被点击。事件简单学习功能：某些组件被执行了某些操作后，触发某些代码的执行。...如何绑定事件直接在html标签上，指定事件的属性(操作)，属性值就是js代码事件：onclick— 单击事件通过js获取元素对象，指定事件属性，设置一个函数代码： <img

2.9K3 0

运行Excel VBA的15种方法2

选择该选项卡，单击“重命名”按钮，修改默认的名称，如下图17所示。...图18 单击“确定”，这样就在Excel功能区中添加了一个名为“我的宏代码”的自定义选项卡，带有一个“新建组”，里面是与要运行的宏关联的命令按钮，如下图19所示。...图19 方法9：从VBE的运行菜单中运行VBA 在VBE中，首先将光标置于要运行的过程代码中，然后单击顶部菜单“运行——运行子过程/用户窗体”，如下图20所示。...图20 方法10：从VBE工具栏中运行VBA 在VBE中，首先将光标置于要运行的过程代码中，然后单击顶部调试工具栏中的“运行——运行子过程/用户窗体”按钮，如下图21所示。...方法14：从超链接中运行VBA 单击超链接时触发宏运行，如下图23所示。图23 很特别！方法15：从工作簿事件中调用VBA过程基于工作簿事件，例如打开或关闭工作簿时自动运行宏。

5124 0

水果编曲软件FLStudio最新21简体中文版本

添加音轨（Adding tracks）-在播放列表剪辑焦点区域新增一个 [+] 按钮，通过左键和右键单击选项添加乐器和音频音轨。...04通道机架通道按钮（单击右键）Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器（改进）标签（Tags）-单击标签（底部）打开更多选项。偏好（Favoriting）-单击鼠标切换内容上的星号。...将完整路径显示为筛选项的提示定位文件（Locate file）-右键单击文件选项，在系统文件浏览器中突出显示标签（Tags）-可以（右键单击）删除标签。...Soundfont Player-增加了一个“程序模式”选项，以确定如何触发Patcher（补丁）。

2.7K0 0

Windows 操作系统的安全设置

然后才可以右击你想要设置的盘符驱动器，选择“属性”选项，添加 adminitrator和system确定后，再选择everyone用户将其删除，单击“高级”勾选上里面“重置所有子对象的权限并允许传播可继承权限...然后单击“高级”，将“从父项继承那些可以应用到子对象的权限项目，包括那些在此明确定义的项目(I)”前的勾去掉，然后单击“确定”按钮，将 administrator和system账号以外的用户删除。...这里同样在服务列表里，打开“Terminal services服务”的属性对话框，将其启动类型更改为“已禁用”状态后，单击“确定”按钮使其生效。...要想阻止其他网站所弹出的窗口，这里我们单击下面的“Internet选项”标签，在弹出的“Internet属性”对话框内，切入至上方“隐私”标签处，此时你会发现下面会多出一个弹出“窗口阻止”程序栏，然后我们单击其栏目里的...另外该安全中心还提供了防火墙功能，你只要在其下方单击“Windows 防火墙”标签，就可弹出“Windows 防火墙”对话框窗口，然后从中选中里面“启用”单选框项，单击“确定”按钮，便可发挥内置的防火墙抵御外界攻击的作用

1.1K3 0

学习jQuery这一篇就够了

注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...event.stopPropagation() 防止事件向外冒泡。 # 3.4.5 表单事件 # 1. focus() 方法描述：当失去焦点时触发所绑定的函数。...需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出 “按钮被单击了” 按钮 $('button').click(function () { console.log...需求描述：为按钮绑定一个双击函数，然后双击按钮，在控制台输出 “按钮被单击了” 按钮 $('button').dblclick(function () { console.log

9935 0

AngularDart Material Design 步进器顶

步进器是用于将进度或功能作为导航工具传送的编号指示器 Inputs: legalJumps String 跳转（定义为由“继续/取消”按钮触发的步骤开关）是合法的。...这可以用于防止步骤继续直到当前步骤的所有部分满足验证要求。 cancelHidden bool 是否应在此步骤中隐藏取消按钮。 complete bool 步骤是否完成。...可选步骤有一个额外的标签，表示它们是可选的，应该是可跳过的。默认值为false。...Outputs: cancel Stream> 单击“Cancel ”按钮时调用。...continue Stream> 单击“Continue”按钮时调用。如果事件处理程序调用$ event.cancel（），则该步骤将不会继续。

7162 0

FL Studio21下载MacOS版简体中文支持苹果M1处理器

添加曲目 - 播放列表剪辑焦点区域上的新 [+] 按钮，可通过左键和右键单击选项添加乐器和音轨。粘贴位置 - 添加到新音轨的剪辑放置在播放头位置或任何时间选择中。...GUI - 主动添加链接时，“添加目标链接”（+）按钮会脉冲（单击以开始处理）。...浏览器（改进）：标签 - 单击标签（底部）以打开更多选项。收藏夹 - 在将鼠标悬停在内容上时单击星形。搜索 - 布尔搜索查询（“大踢”与大踢）。...声音字体播放器 - 添加了“程序模式”选项来确定补丁的触发方式。可视化工具 - 添加了来自Dubswitcher的新后期处理效果。展示台（ZGE）：UI - 支持效果中参数之间的分隔符。...FL Studio 安装程序将不再将程序与 Beta 版本中的 .flp 文件相关联，以防止意外保存到 Beta 版。

4K2 0

Vcl控件详解_c++控件

当标签页的行数大于1时，当单击其它页时，在它下面的页会自动翻动该控件的底部 Style：设置该控件的样式，大家一试就会知道 TabHeight：设置页标签的高度 TabIndex：反映当前标签页的索引号...为False，该方法向后移动参数个标签页 TabRect：设置返回标签页的矩形事件　OnChange：当标签页改变时触发 OnChanging：当标签页正在改变时触发 OnDrawTab...与上面的区别是在它的事件中可以得到它的新值和单击是向上还是向下按钮 onClick：单击按钮时触发 THotKey 属性 HotKey：设置或获取热键 InvalidKeys：设置不允许有哪些热键...：在绘制组件子项目期间的不同状态触发 OnChange：当列表中的项目改变时触发 OnChanging：当列表中的项目正在改变时触发 OnColumnClick：当单击列时触发 OnColumnDragged...程序运行时，是否显示TcoolBand的Text中的内容 Vertical：默认为假，组件中的区按从左到右从上到下的方法水平排列，否则相反方法 FlipChildren：该方法重载承继承的方法以防止翻转组件中的子组件

4.9K1 0

FL Studio水果21最新中文版详细功能介绍

添加音轨 - 通过在播放列表剪辑焦点区域添加新的“+”按钮，使用左键单击和右键单击选项添加乐器和音轨。粘贴到位置 - 添加到新音轨的剪辑将放置在播放头位置或随时选择。...GUI - 主动添加链接时，添加目标链接上的 + 按钮会闪烁，单击它以启动该过程。将自动化剪辑通道的包络网格拆分更改为四个拆分。...浏览器（改进）标签 - 单击图标可打开更多选项。收藏夹 - 单击星形图标。搜索 - 布尔搜索查询（例如“Big Kick”和Big Kick）。...查找文件 - 右键单击文件以在系统文件浏览器中突出显示该文件。标签 - 您可以右键单击以删除标签。选项卡 - 使用右键单击选项卡启用单独记住的选项卡大小选项。...声音字体播放器 - 添加了程序模式选项以确定如何触发补丁。展示台 - 为 Dubswitcher 添加了新的后期处理效果。展示台（ZGE） UI - 支持效果参数之间的分隔符。

4.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭