addEventlistener不生效，已经执行了注册，但是事件没有注册成功

最新推荐文章于 2024-05-29 16:21:30 发布
最新推荐文章于 2024-05-29 16:21:30 发布
阅读量1.6w 收藏 2
点赞数 1
分类专栏： vue 文章标签： addEventlistener vue template
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lqyygyss/article/details/82012311
版权

浏览器强刷的时候，有时候明明代码已经执行了addEventlistener，但是在chrome上的event listener就是没有看到注册的，自然也不会响应事件

 

重点，有时候可以有时候不可以。

后来发现是vue的原因，由于使用了vue的单文件组件，template里面的模板替换掉了html上的vue的el节点。

所以实际上是有时候注册了事件，但是又被vue的模板重新替换掉了注册位置的节点。自然事件不生效了。

偶然性是因为取决于addEventlistener和vue的实例化的先后顺序

 

程序me
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
滚动时回显白色导航，以及vue 解决window.addEventListener失效问题
weixin_55648290的博客
11-01 2092
1.在最大的盒子加ref=" " 2.在生命周期函数mouted()中写 以上可解决在vue中window.addEventListener失效问题。 以下是回显白色导航 1.两个状态，一是默认的返回按钮，二是回显的白色背景导航。白色导航使用的是vant组件库里面的吸顶。 2.在方法里面决定二者的显示与隐藏 ...
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 6947
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
window.addEventListener在部分安卓手机不生效
weixin_56006480的博客
05-26 2149
事件的默认行为，导致无法正确触发滚动事件。可以尝试在事件处理函数中调用。可能会存在一些问题，主要是因为安卓手机浏览器的兼容性问题。安卓手机上的一些浏览器可能会阻止。，这个选项用来指定是否允许调用。方法传递了一个选项对象。在上面的代码中，我们给。
window.addEventListener 用法
最新发布
ivan5277的博客
05-29 1716
是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用。
JS中addEventListener不能用的问题
artemisrj的专栏
03-05 5625
点击      var name3=document.getElementById('name3'); //要注意  var name2=document.getElementById('name2'); //要注意  var info=document.getElementById('info');  name3.addEventListener('click',func
@EventListener (ContextStartedEvent.class) 不起作用
hy_208的博客
04-27 2028
结果发现Spring 启动之后ContextStartedEvent不调用。改用ContextRefreshedEvent可以成功。
解决IE9以下addEventListener不生效问题
sinat_25539103的博客
02-18 6234
Element.prototype.addEvent = function(type,fn){ if(window.addEventListener){ this.addEventListener(type, fn); }else if(window.attachEvent){ this.attachEvent('on' + type, fn
.addEventListener添加事件失败原因之一
anwebDesigner的博客
02-08 1万+
正确语法：document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });addEventListener() 方法用于向指定元素添加事件句柄。注意，这个指定元素是一个元素，所以当使用doc...
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1239
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
HTML5+ document.addEventListener('plusready'不执行解决办法！！！
YingDaoMonkey的博客
11-26 9360
// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断 if(window.plus){ // 在这里调用5+ API }else{// 兼容老版本的plusready事件 document.addEventListener('plusready',function () { // 在这里调用5+ API },false)...
removeEventListenerz不生效的问题
qq_40936253的博客
12-12 628
1、 element.addEventListener(type,handler,false) element.removeEventListener(type,handler,false) handle函数要保持一致，才能移除指定的事件函数   2、 element.addEventListener(type,this.handler.bind(this),false) eleme...
学习笔记：Java高级编程之多线程
Red_super的博客
10-14 312
学习笔记： 线程的操作状态（阻塞） 学习内容： 注意：之所以图中有7个状态，是因为 在jdk5之后，就绪和运行状态统称为Runnable 1、new（初始化状态）：在程序中用构造方法创建一个线程对象后，新的线程对象边处于新建状态，此时，它已经有相应内存空间和其他资源，但还处于不可运行状态。就是你实例化了一个对象，但是还没有开始调用方法。 2、 Runnable（可运行状态）： 上面说了Runnable包含了就绪和运行状态，而且这也是核心状态。 （1）就绪状态： 新建线程对象后，调用该线程的st
js基础:addEventListener与removeEventListener使用时，涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
qq_45796592的博客
12-20 2021
一文理解addEventListener与removeEventListener使用以及涉及的问题（包括事件捕获、冒泡，removeEventListener不生效问题）
使用匿名函数的addEventListener移除事件无效的解决方案
热门推荐
slongzhang的博客
10-12 8万+
removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如使用匿名函数，类似 “document.removeEventListener(“event”, function(){ #code… });” 该事件是无法移除的。 但在实际开发中我却更多的...
百度地图 华为手机 addEventListener click 不兼容解决
程序员大柱
04-20 707
问题： 项目中的使用了百度地图，前端在监听点击事件的时候是使用 map.addEventListener('click',function(){...})，苹果手机和小米手机均能出发该事件，但是华为手机确无法出发，或者偶尔用两个手指点击会触发(几率非常小)。后来通过几个博客了解到touch事件(本人后端程序员，对前端不太了解)。 原理： 通过监听touchstart和touchmove两个事件中，...
Spring中明明插入了数据，为什么事件监听器EventListener却读不到？
IT技术精选文摘
11-10 3117
若有收获,请记得分享和转发哦一、问题描述平时我们在完成某些数据的入库后，发布了一个事件，此时使用的是@EventListener，然后在这个事件中，又去对刚才入库的数据进行查询，从而完成...
【常见错误】通过document.getElementsByClassName()获取的dom元素添加监听事件时报错：addEventListener is not a function
公众号：前端蛋卷
06-30 3万+
今天写了一个表达验证的网页，在给一个输入框添加监听事件的时候，控制台一直报错，报错原因显示Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function通过查资料得知：这是因为选择器没有正确选择元素对象document.getElementsByClassName(...)捕捉到...
addEventListener调用console.log()失败？浅谈函数调用
个人博客
05-08 752
引入 var dom = document.getElementByID("foo"); dom.addEventListener("click", console.log("hello")); 这一段代
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
1
12-14 7268
多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true)
在uniapp onload生命周期函数中执行，document.addEventListener 不生效
05-24
在 `uniapp` 中，`onLoad` 生命周期函数是在页面加载时执行的，但是此时页面可能还没有完全渲染完成，因此部分 `DOM` 元素可能还没有被创建，所以在 `onLoad` 中使用 `document.addEventListener` 可能不会生效。 建议在 `onReady` 生命周期函数中使用 `document.addEventListener`，因为此时页面已经渲染完成，`DOM` 元素已经被创建，可以正常添加事件监听。 例如： ``` export default { onReady() { document.addEventListener('click', () => { console.log('click event'); }); } } ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值