当元素放置在按钮之后时，按钮停止工作(javascript)
这个问题可能是由于JavaScript中的事件冒泡（Event Bubbling）导致的。当一个元素的事件被触发时，这个事件会从该元素开始，逐级向上传播到它的父元素，直到文档根节点。如果在这个过程中，某个父元素的事件处理器处理了这个事件，那么这个事件就不会继续向上传播。
在你的情况下，可能是按钮后面的元素的事件处理器阻止了事件冒泡，导致按钮的事件处理器无法被触发。
基础概念
事件冒泡：事件从最具体的元素（事件目标）开始触发，然后向上冒泡到较为不具体的元素（例如文档根节点）。
解决方法
你可以通过以下几种方式来解决这个问题：
- 阻止事件冒泡：在按钮后面的元素的事件处理器中，使用
event.stopPropagation()方法来阻止事件冒泡。
document.querySelector('.element-after-button').addEventListener('click', function(event) {
event.stopPropagation();
// 其他代码
});- 检查事件目标：在父元素的事件处理器中，检查事件的目标是否是你期望的按钮。
document.querySelector('.parent-element').addEventListener('click', function(event) {
if (event.target.matches('.button')) {
// 按钮被点击的处理代码
}
});- 使用事件委托：将事件处理器绑定到父元素上，通过检查事件目标来处理特定子元素的事件。
document.querySelector('.parent-element').addEventListener('click', function(event) {
if (event.target.matches('.button')) {
// 按钮被点击的处理代码
}
});示例代码
假设你有以下HTML结构：
<div class="parent-element">
<button class="button">Click Me</button>
<div class="element-after-button">Element After Button</div>
</div>你可以使用以下JavaScript代码来处理按钮点击事件：
document.querySelector('.parent-element').addEventListener('click', function(event) {
if (event.target.matches('.button')) {
console.log('Button clicked!');
}
});参考链接
通过以上方法，你可以确保按钮的事件处理器能够正常工作，即使它后面有其他元素。
相关·内容
我正在尝试制作一个基于文本的空闲游戏，其中涉及多个按钮，并围绕这些按钮进行文本。 每当我试图将文本放在“工作”按钮之后时，它就会停止工作，并在单击时停止调用回调。到目前为止，唯一看起来没有打破它的是在它后面添加其他按钮。我使用一个名为createButton()的函数来创建按钮，它接受3个参数，按钮文本、按钮ID和按钮回调，为了绘制文本，我使用了一个“自定义”写函
浏览 8提问于2021-11-11得票数 0
1回答
我正在尝试添加一个简单的javascript函数，这个函数已经提供给我，它可以从Flickr抓取图像到一个按钮。当我点击按钮时，什么都不会发生。
浏览 2提问于2017-03-12得票数 0
我正试图在点击按钮时绘制一个图形。在下面的代码中，当我单击“单击我”按钮时，我能够看到屏幕上显示的图形，但它很快就会从屏幕上显示出来。我想这张图没有被渲染。我不知道我哪里出了问题。我需要图表在我的屏幕上坚持。一旦解决了这个问题，我将动态地填充数据和类别的值。<script src="http:/
浏览 3提问于2014-07-21得票数 0
回答已采纳
我正在使用jquery ajax函数加载下拉列表的内容更改另一个下拉列表这个工作很好，现在当我禁用javascript时，我希望我的表单提交下拉列表的更改，这样我可以在post返回后加载另一个下拉列表中的内容
浏览 0提问于2011-04-13得票数 1
回答已采纳
所以我是javascript/jquery的新手，所以我需要一些帮助。问题就在这里。我有一个页面，其中一个按钮触发一个jquery动画来显示登录表单。(它只是替换了以前的html在它的位置)在登录表单上，我让它动态创建一个按钮来隐藏登录表单，并显示原始的html。但是该按钮不能被.click方法调用，甚至OnClick属性也不起作用！//Regular HTML);
$("#menu").animate({height: "to
浏览 1提问于2013-05-11得票数 2
回答已采纳
如果你点击按钮来选择一个披萨，它会打开一个灯箱弹出窗口，里面有一些配料选项。我已经检查了一个插件的演示，但它允许你选择你想要的复选框数量，并且在你点击“购买”按钮后只会显示一个错误消息。我猜这个方法在lightbox中不起作用，它只会关闭弹出窗口，并在页面顶部显示msg。
浏览 0提问于2020-07-03得票数 1
let id: string = (event.target as Element).id; console.log(event.target)按下按钮将触发以事件为参数的系统将记录"test" (id)和按钮事件。
按下按钮上的文本将记录一个未定义的id和一个带有类span的mat-button-wrapper。问题:如果按下按钮文本，我想得到按钮事件目标(而不是span事件目标)，如何实现？
浏览 0提问于2018-12-03得票数 2
回答已采纳
1回答
我有一个关于浏览器记住以前输入的值的问题...我正在开发ASP.NET MVC2应用程序，由于某种原因，我的网站突然停止了对以前在文本输入中输入的值的记忆。我还注意到，我的用户名文本框值开始出现在电子邮件文本框中，尽管我从未更改过html元素的名称或id。我所做的唯一一件事就是删除了一些输入元素，并添加了一些新的...但它们都有唯一的id和名字..。
浏览 1提问于2010-11-28得票数 0
2回答
我有一个提交按钮，它是禁用的，除非您选择一个选项我使用单选按钮查看选项 <form name="choose"format_button">
<input name="type" type="radio" class="blue_font" value="flv" onclick="javascrip
浏览 1提问于2013-01-21得票数 0
我有一个页面上有3个按钮，当用户点击一个按钮，它会显示一个模型弹出窗口，其中用户输入数据等。
在主页上有一个在弹出时突破模型的索引，这是一个已知的IE6 z- dropdownlist错误。我的变通方法(在尝试bgiframe之后)就是在看到弹出窗口时简单地隐藏下拉菜单。它工作得很好。主页的下拉列表下面还有一个按钮，当单击该按钮时，将执行Ajax回发，该回发将所选项目的值发送到数据
浏览 4提问于2009-04-17得票数 0
1回答
当聚合物子元素DOM被加载时，我有一个问题。这是我的案子：
在父组件中，当我按下按钮时，会触发ajax请求。当get响应被绑定到变量时，这个变量会转到dom-重复并创建子项。因此，我的问题是在加载所有子元素时捕捉到这个时刻，因为我希望使用this.$$()来选择子组件并触发所需的方法并滚动到视图中。如果我在get请求之后使用this.$$()选择器，在</
浏览 3提问于2016-11-25得票数 0
回答已采纳
我有一个确认框，在单击“删除”按钮时显示确认警报，<script type="text/javascript"> });每当我为html元素放置一个类时，它都可以正常工作，直到我将它添加到这个函数中，它才停止工作。
浏览 0提问于2018-09-24得票数 0
回答已采纳
3回答
所以我在一个表上有多个删除按钮，每个按钮都有自己独特的id。我试图通过javascript获得这个值，但我根本无法让它工作。
浏览 4提问于2016-06-18得票数 0
回答已采纳
当我试图通过.为按钮的单击事件在test.js中实现一个test.js事件处理程序时， alert("是否应将所有事件处理程序放置在文档中准备就绪？寻找一致的方法。
我希望在可能的情况下使用jQuery。我很难用jQuery理解函数的范围。
浏览 7提问于2018-01-05得票数 0
回答已采纳
1回答
我正在使用Facebook Javascript API。我想创造出这样的东西：
另一个按钮out1是在FB.api
浏览 2提问于2014-12-25得票数 0
回答已采纳
我正在创建firefox插件，将onclick事件添加到特定的按钮。("input“元素)TypeError: document.querySelector("#send_top")为空出现此错误的原因是和是完全不同的页面。在这种情况下，该插件似乎加载了，但没有一个按钮的'#sen
浏览 0提问于2012-04-16得票数 1
回答已采纳
我有一个页面，动态地在Page_Load处理程序中创建一个列表、一个按钮和一个textfield。单击该按钮时，文本框中的文本将添加到列表中，并通过清除页面的controls集合，然后重新添加所有必需的控件来重新创建所有内容。因此，基本上，每个回发都要创建两次按钮(首先在Page_Load中，然后在Button_Click处理程序中)。
这只适用于第一个PostBack。如果第二次尝试，Button_Click处理程序就不会被调用(尽管动态控件在PostBack上被重新
浏览 1提问于2014-11-06得票数 0
回答已采纳
当我创建一个联系人(在联系人应用程序中)时，我正在尝试创建一个非常类似于机器人视图的视图，我很难弄清楚他们是如何做到的！这个视图是否使用了一些我可能还没有找到的基本组件？imagebutton:我无法将边框调整到合适的大小(拍摄图片后，图像将是不同的大小)，并且当图像更改时，单击动画将停止工作。每个元素之间的边界:我只是通过在元素之间放置一个薄视图来实现这一点，但这并不像是我想要的方法。
例如，当点击文本'Phone‘<em
浏览 0提问于2011-06-23得票数 1
回答已采纳
我的问题来自这样一个事实:我只需要在数据库查询和传递值(如文本字段中的内容)时使用PHP。因此，我将表单设置为将php作为其操作，并创建了一个javascript文件，该文件首先运行其代码并检查null。javascript工作得很好，但是当它返回的警报关闭后，php页面就被加载了(它还没有包含任何代码，因为我需要首先解决这个问题)。我尝试了一些javascript命令，这些命令试图重新加载页面，但是PHP仍然处于激活状态。我读到AJAX可能会处理这个问题，但是由于某些原因，我在让JQu
浏览 2提问于2014-12-07得票数 1
回答已采纳
1回答
导航栏不会切换
、、、
切换导航栏的按钮将不起作用。我已经检查了类似问题的答案，看不出我的html有任何问题。非常感谢您的帮助！
我可以在导航栏中看到所有li项，但无法隐藏它们。
浏览 2提问于2017-03-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
