首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我动态改变按钮时,addEventListener点击不起作用

当你动态改变按钮时,addEventListener点击不起作用的原因可能是因为事件绑定发生在按钮元素创建之前,或者是因为事件绑定发生在按钮元素被移除或替换之后。

解决这个问题的方法是使用事件委托,即将事件绑定到按钮的父元素上,然后通过事件冒泡的方式捕获到按钮的点击事件。这样无论按钮是否被动态改变,都能够正确地触发点击事件。

以下是一个示例代码:

代码语言:txt
复制
// 获取按钮的父元素
var parentElement = document.getElementById('parentElement');

// 添加点击事件的事件委托
parentElement.addEventListener('click', function(event) {
  // 判断点击的元素是否为按钮
  if (event.target && event.target.matches('button')) {
    // 执行按钮点击的操作
    console.log('按钮被点击了');
  }
});

在上述代码中,我们将点击事件绑定到按钮的父元素上,并通过判断点击的元素是否为按钮来执行相应的操作。这样无论按钮是否被动态改变,都能够正确地触发点击事件。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

给用户一个否减弱动画效果的选择

当我们在 newsletter 【https://css-tricks.com/newsletters/】上分享这种方法之后,得到了 Michael Gale 的有趣回复: 喜欢 GIF 动画,但又不想让...Chrome DevTools显示png已下载 我在测试 Firefox 时,发现它似乎不起作用,继续下载 GIF 版本。...这只是一个随意的选择 —— 你可以把它放在你希望的任何地方,或者甚至可以让整个图像都可以点击,只要你认为可以向用户解释清楚。...请记住,只有在同一媒体查询匹配时才能显示按钮: 1 .picture-wrap .animate-button { 2 display: none; 3 } 4 5 @media (prefers-reduced-motion...: reduce) { 6 .picture-wrap .animate-button { 7 display: block; 8 } 9 } 单击(或点击)按钮时,我们需要删除媒体查询以通过下载动画源来启动动画

77450

前端成神之路-WebAPIs05

1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 ​ 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 ​...案例分析: 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动, 之后松开鼠标...开始拖拽 // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e)...所以此时后退按钮不能刷新页面。 此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。...function animate(obj, target) { // 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器 // 解决方案就是

1.5K10
  • 【Web前端】嵌套元素的“事件”冒泡?!

    当用户点击按钮时,首先触发按钮的点击事件,然后事件冒泡到父元素 ​​div​​。 结果是用户将看到两个弹窗,依次表示“子元素被点击”和“父元素被点击”。 冒泡顺序 点击按钮,触发 按钮点击事件。...alert("子元素被点击"); event.stopPropagation(); // 阻止事件冒泡 }); 在这个更新后的代码中,点击按钮时用户只会看到“子元素被点击”,而不会看到“父元素被点击...当我们为事件设置监听器时,可以指定事件捕获阶段。在捕获阶段,事件从文档的根元素开始,然后向下传播到最具体的元素。...(event) { alert("子元素被点击"); event.stopPropagation(); }, true); // 启用捕获 点击按钮时,用户会看到“父元素被点击”,然后是...这种方法特别适用于动态生成的内容,或者当子元素数量较多时。 事件委托的好处 减少内存开销:只需一个事件监听器就可以处理多个元素。 更容易管理:更方便的添加或删除监听器,尤其是动态内容。

    7300

    DOM事件的传播机制

    console.log('内层元素被点击');}, true);btn.addEventListener('click', function() { console.log('按钮被点击');});当我们点击按钮时...('内层元素被点击');});btn.addEventListener('click', function() { console.log('按钮被点击');});当我们点击按钮时,控制台会输出以下内容...console.log('内层元素被点击');}, true);btn.addEventListener('click', function() { console.log('按钮被点击');});当我们点击按钮时...这样一来,无论子级元素是已经存在的还是动态生成的,都可以通过父级元素来管理它们的事件。...('触发事件的目标元素是:', event.target); }});当我们点击任意一个列表项时,控制台会输出以下内容:列表项被点击 触发事件的目标元素是: 列表项1可以看到,通过在父级元素上绑定点击事件处理程序

    19830

    前端基础-事件

    mousedown 在元素上按下任意鼠标按钮 mouseup 在元素上释放任意鼠标按键 click 在元素上按下并释放任意鼠标按键 dblclick 在元素上双击鼠标按钮 contextmenu 右键点击...; } 2.3.5 form表单事件 Event Name Fired When reset 点击重置按钮时 (<input type=’reset’ value=’重置’...alert('re'); } 2.3.6 内容变化事件 change: 当内容改变且失去焦点时触发 (存储事件) input : 当内容改变时触发 (值变化事件) <body...d.onchange = function(){ console.log('t'); } //当内容改变时触发 d.oninput = function...注意: 三种事件绑定方式全部 默认 监听冒泡阶段事件; 2.5 改变事件触发的阶段 想让事件监听在捕获阶段,只能通过 addEventListener 方法的进行设置: var

    1.3K10

    Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载

    随着动态导入提案的出现,我们有了额外的选择,即动态地导入模块。现在它进行到了TC39流程的第三个阶段。有了它,你就可以添加动态导入模块了。使用它时,你可能会根据用户及其操作行为的做相应处理。...console.log(divideModule.divide(6, 3)); // 2 }) }); }); 在浏览器的开发者工具,如果打开Network标签,你可以看到,模块开始下载的发生在点击按钮之后...值得注意的是,如果再次点击按钮,包含了拆分后的模块文件不会再次被下载。 在Webpack中使用动态导入,会新增一个chunk,我们视作异步chunk。 像这样的chunk会被打包进单独的文件。...这是因为Webpack不能在编译时知道哪些模块需要被导入。 你还需要知道像import(pathToFile)这样的完全的动态声明是不起作用的,因为Webpack至少需要一部分文件路径信息。...使用它时,只有匹配了正则表达式的模块会被打包。 webpackMode webpackMode属性定义了resolve动态模块时的模式。支持以下模式: lazy 这是默认模式。

    1.7K10

    「JavaScript 」动画基础 - 01

    点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。...案例分析: 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动, 之后松开鼠标...开始拖拽 // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e) { var x = e.pageX...当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子 preview_img.addEventListener('mouseover', function(...function animate(obj, target) { // 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器 // 解决方案就是

    50910

    常见网页特效案例

    功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。...鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function() { arrow_l.style.display...点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小...节流阀 防止轮播图按钮连续点击造成播放过快。 节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。...当我们点击了返回顶部模块,就让窗口滚动的页面的最上方 goBack.addEventListener('click', function() { // 里面的x和

    2.3K40

    关闭浏览器触发监听器,向后端发送请求

    现在的需求是,多端只可以有一个用户登录,当一个用户关闭浏览器或者关闭标签页时,向后端发送请求删除该用户的登录信息,以此来解决用户及时下线的目的。...('beforeunload', (e) => this.beforeUnload(e)); // 点击 离开 按钮时触发 window.addEventListener...('unload', this.logout); 其中下面这句话很重要,它会在用户点击关闭浏览器或者关闭标签页,弹出提示信息:是否确认离开。...点击取消按钮时不会触发第二个监听器,点击离开按钮时,则会触发下面的监听器。 重点2: // 关闭浏览器标签触发 logout() { fetch('/login/loginOut?...Content-Type': 'application/json'}, keepalive: true }); }, 可能你也观察到了,我使用了fetch请求,那是因为axios异步请求在这里不起作用

    1.6K10

    网页轮播图案例

    功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。...自动播放功能 添加一个定时器 自动播放轮播图,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件arrow_r.click() window.addEventListener...点击小圆圈,移动图片 当然移动的是 ul            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值            // 当我们点击了某个小li 就拿到当前小...li 的索引号            var index = this.getAttribute('index');            // 当我们点击了某个小li 就要把这个li 的索引号给...num              num = index;            // 当我们点击了某个小li 就要把这个li 的索引号给 circle              circle =

    1.4K30

    网页轮播图案例

    功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。...自动播放功能 添加一个定时器 自动播放轮播图,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件arrow_r.click() window.addEventListener('load'...点击小圆圈,移动图片 当然移动的是 ul            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值            // 当我们点击了某个小li 就拿到当前小...li 的索引号            var index = this.getAttribute('index');            // 当我们点击了某个小li 就要把这个li 的索引号给...num              num = index;            // 当我们点击了某个小li 就要把这个li 的索引号给 circle              circle =

    5.5K21

    「JavaScript 」动画基础 - 02

    当我们点击按钮时候,判断步长是正值还是负值 如果是正值,则步长往大了取整 如果是负值,则步长 向小了取整 1.1.3 动画函数添加回调函数 回调函数原理:函数可以作为一个参数。...功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 图片播放的同时,下面小圆圈模块跟随一起变化。...点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小...节流阀 防止轮播图按钮连续点击造成播放过快。 节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。...当我们点击了返回顶部模块,就让窗口滚动的页面的最上方 goBack.addEventListener('click', function() { // 里面的x和y 不跟单位的 直接写数字即可

    36720

    网页轮播图案例

    功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​...案例分析2. ① 动态生成小圆圈 ② 核心思路:小圆圈的个数要跟图片张数一致 ③ 所以首先先得到ul里面图片的张数(图片放入li里面,所以就是li的个数) ④ 利用循环动态生成小圆圈(这个小圆圈要放入...④ 此时我们使用手动调用右侧按钮点击事件 arrow_r.click() ⑤ 鼠标经过focus 就停止定时器 ⑥ 鼠标离开focus 就开启定时器 window.addEventListener...点击小圆圈,移动图片 当然移动的是ul // ul 的移动距离 小圆圈的索引号 乘以图片的宽度 注意是负值 // 当我们点击某个小li 就拿到当前小li 的索引号 var...点击按钮 图片滚动一张 var num = 0; var circle = 0; // flag 节流阀 var flag = true; arrow_r.addEventListener

    2.4K10

    webapi(五)- 事件对象

    ) 事件委托 优点: 给父级元素 注册事件(可以提高性能) 给动态新创建的元素注册事件 原理: 事件冒泡,点击子元素时,冒泡冒到了父元素,所以给父元素注册的事件,子元素也能触发...("哈哈") } } // 点击按钮,新建p添加到div中 create.addEventListener('click', function () { let newP = document.createElement...~') }) 两种注册事件的区别 传统on注册(L0) 同一个对象,后面注册的事件会覆盖前面注册(同一个事件) 直接使用null覆盖就可以实现事件的解绑 都是冒泡阶段执行的 // 需求:按钮的点击事件只能触发一次...// 解绑按钮注册的点击事件 btn.onclick = null } 事件监听注册(L2) 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获...// resize事件 : 当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小 window.addEventListener('resize' , function

    1K20

    元素偏移量 offset 系列

    1. offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。...1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。...4.鼠标松开,可以停止拖动模态框移动 案例分析: 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;...开始拖拽            // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标        title.addEventListener('mousedown', function(e)...当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子    preview_img.addEventListener('mouseover', function(

    1.2K20

    元素偏移量 offset 系列

    1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。...1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。...案例分析: 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动...开始拖拽 // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e)...当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子 preview_img.addEventListener('mouseover', function(

    1.3K51

    元素偏移量 offset 系列

    元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。...1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 ​ 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 ​...案例分析: 点击弹出层, 模态框和遮挡层就会显示出来 display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理:鼠标按下并且移动...开始拖拽 // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e)...当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子 preview_img.addEventListener('mouseover', function(

    79140

    使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash...点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。...你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。...3、setCSSEffects() 方法 当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css “:hover”, “:active” 等伪类可能会失效。...前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。

    1.6K60
    领券