addEventListener不能正常工作
addEventListener是JavaScript中的一个方法，用于向指定的元素添加事件监听器。当指定的事件触发时，该事件监听器会执行相应的代码。
事件监听器是用来捕捉和处理事件的函数。通过addEventListener方法，可以向一个元素添加多个事件监听器，以便在不同的事件发生时执行不同的代码。
对于addEventListener不能正常工作的情况，可能有以下几个原因和解决方法：
- 语法错误：请确保在调用addEventListener方法时，语法是正确的。方法的第一个参数是事件的类型，如click、mouseover等。第二个参数是事件发生时要执行的函数。
- 元素不存在：请确保要添加事件监听器的元素是存在的，并且已经加载到文档中。可以在JavaScript代码中使用DOM操作来获取元素。
- 作用域问题：如果事件监听器无法访问到所需的变量或函数，可能是因为作用域的问题。请确保所需的变量或函数在事件监听器的作用域内可访问。
- 事件类型错误：如果使用了错误的事件类型，例如将一个鼠标事件应用于一个键盘事件上，那么事件监听器将不起作用。请确保使用正确的事件类型。
- 事件冒泡阻止：有时候，其他的事件监听器或代码可能会阻止事件的冒泡传递到目标元素上，从而导致addEventListener方法无效。可以尝试使用event.stopPropagation()方法来阻止事件冒泡。
总的来说，当addEventListener方法不能正常工作时，我们需要检查语法、元素的存在、作用域、事件类型和事件冒泡阻止等因素，并逐一解决问题。在腾讯云相关产品中，可以利用云服务器、云函数、云开发等来搭建后端服务，使用云数据库来存储数据，通过云网络安全产品来保护应用程序的安全。
相关·内容
我使用的是jssor滑块库，它在所有设备(触摸屏和非触摸屏)上都工作得很好，但在windows8.1触摸屏kiosk machine (IE11)上却失败得很糟糕。即使是他们在中提供的演示链接也不能正常工作。然而，在同一设备中，如果我使用鼠标和拖动，事情是正常的。
也试图通过修改插件来捕获触摸事件-仍然没有成功。有什么建议和建议吗？
浏览 0提问于2015-05-07得票数 0
5回答
我有一个React应用程序，我在窗口中添加了事件侦听器。因此，通过这种方式，我可以检测用户是否实际查看页面。在计算机浏览器上，一切正常工作。
但我在IphoneX上尝试了这个(这与无关，但浏览器是Safari)，我发现:如果用户握住菜单的底部并滑动掉所有打开的，那么onBlur就不能运行。它停留在onFocus事件上。因此，实际上，window.eventlistener在移动设备上不能正常工作。
另外，当我再次打开浏览器(但不点击任何东西，只打开浏览器并查看页面) onFocus事件也不起作用。它等待我触摸或点击页面上的某个地方。
如何在移动端完全处理用户焦点/模糊？
浏览 16提问于2022-06-09得票数 4
回答已采纳
我正在重新学习JS，试着用香草JS制作模态窗口。因此，我的任务是使逃逸按钮工作，并关闭模式击中它。我发现当我把'keypress‘事件放在文档中时，它不能工作，而'keyup’工作正常。我找不到确切的信息来解释为什么会这样。我曾经使用过e.KeyCode，但发现它被废弃了。所以我主要有两个问题，我找不到直接的答案：
为什么密钥不能工作？
2021年处理键盘事件的最佳方法是什么？
这是密码。Console.log不工作。如果我把按键改为键盘，一切都正常。
document.addEventListener('keypress', function (e) {
浏览 1提问于2021-05-02得票数 1
回答已采纳
问题是，B.swf是主要的应用程序，因为它很大，我使用单独的A.swf加载B.swf，然后添加到stage中。但在这种情况下，B.swf不能正常工作(有些功能可以工作，但有些函数不能工作)，在这种情况下，主要阶段是什么是有防御性的。当我直接加载B.swf时，它工作得很好，所以有什么想法可以用A.swf加载B.swf，然后将主时间线/阶段“更改”为指向B.swf，这样B就可以完全起作用了？
浏览 0提问于2012-09-04得票数 0
回答已采纳
我写了一小段代码，当你按下arrowKeys时禁止滚动。如果您将代码应用于文档，它将正常工作。Window也可以工作，但如果您将它应用于本应禁用它的div或该div的父级，则它不能工作。有人知道解决方案吗？
Html：
<div id="ye">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Css：
div {
max-width:150px;
height:50px;
overflow:scroll;
}
Js：
document.getElementById("ye").add
浏览 0提问于2021-05-13得票数 0
我正在创建一个可拖动的div，如本例所示：
一切正常，但是如果我快速移动鼠标，鼠标离开div，那么它就不再跟随鼠标。我使用elem.addEventListener("mousemove", function(e) {/* ... */}, false);，如果我将最后一个属性更改为true，那么它仍然不能正常工作。只要鼠标在div里面，div就跟着鼠标。
我想不使用JQuery来修复它
浏览 1提问于2014-10-07得票数 2
回答已采纳
我使用了react原生的back handler。但是没有结果。此外，应用程序(后退按钮)在调试模式下工作良好，但在正常模式下不能正常工作。
浏览 1提问于2019-04-01得票数 0
我使用钛SDK4.1.0.GA，最初使用Ti.Paint模块的1.2版本用于iOS。此版本在iOS 8上不能正常工作，因为绘制的线条会结巴。
然后，我将Ti.Paint模块升级到1.4 (目前是最新版本)。画布上的线条现在工作得很好，但出于某种原因，Ti.Paint对象没有事件侦听器，在以前的模块版本中也有。
现在如何检查某人是否真的在画布上作画？这方面的一个很好的例子是，如果您希望使用Ti.Paint让用户提供他们的签名，并且您希望验证在画布上发生的交互。
浏览 0提问于2015-09-10得票数 0
回答已采纳
因此，如果您有一个带有参数的命名函数并调用该函数，那么在使用addEventListener时它不能正常工作，但是如果您将它包装在一个匿名函数中，那么它会工作，为什么呢？
<input type="button" value="click me" id="subBtn" /> <br />
<div id="myDiv">default text</div>
这是我的JavaScript。
function myFunc(str){
document.getElementByI
浏览 10提问于2015-04-02得票数 1
回答已采纳
4回答
更改onclick事件
、、、、
我有一个按钮将用户重定向到上一页：
<button id="back" onclick="location.href='..'">Back</button>
我想把他的位置改成两页。
这个密码怎么了？
document.getElementById("back").setAttribute("onclick", function(){window.location.href='../../'});
或者这个
document.getElementById("back&
浏览 5提问于2020-03-17得票数 0
回答已采纳
2回答
这是问题的继续：
上面的问题被解决了[ thanx to ]。但是我想知道为什么下面的代码段不能工作。
if (window.addEventListener){
window.addEventListener('load', addDateFormatInfo, false);
window.addEventListener('load', loadNewElements, false);
} else if (window.attachEvent){
window.attachEvent('onload
浏览 3提问于2009-11-27得票数 0
具有以下javascript承诺代码：
const loadImage = (src) => new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener(`load`,()=>resolve(img));
img.addEventListener(`error`,(event)=>reject(event));
img.src=src;
});
如果我使用resolve(this)而不是resolve(img)，它为什么不能工作？
也许是
浏览 0提问于2018-07-29得票数 0
回答已采纳
我最近注意到，可能是在安装Rails 5之后，在链接位于内部的页面上(通过turbolinks)，local_time gem不能正常工作。如果指向页面的链接是外部的，或者浏览器刷新了，或者图文链接被禁用，local_time就能正常工作。
有人知道如何在一起使用这些吗？
浏览 1提问于2017-04-14得票数 0
回答已采纳
我正在做下面的代码片段。如果没有setTimeOut()，它可以完美地工作，并在loaded( id )函数中向我显示id。但在setTimeOut()中，这并不能正常工作。
var menuLink = document.getElementsByClassName("li_common_class");
for(var i = 0; i < 5; i++ ) {
var childElement = menuLink[i];
childElement.addEventListener('clic
浏览 0提问于2017-04-09得票数 0
当我在addEventListener()方法中传递函数时，它不能正常工作。事件不注册，我的函数也不调用。
<div id="box-wrap">
<ul id="colorize">
</ul>
</div>
JavaScript
function colorize(){
var ul = document.getElementById('colorize');
for(var i = 0; i < 36; i++){
ul.appendChil
浏览 1提问于2013-08-06得票数 1
回答已采纳
我在输入中写入数值，regex根据我的Regex追赶值并替换。但它不能正常工作。当我编写数值时，我使用keyup事件，并且需要对每个keyup事件正确地修复myregex。它正常工作到四位数之后，它就不能正常工作了。
I期望输入： 592,500,000
，但它在输入中返回如下错误: 5,9,2,5,0,0,000
您可以检查代码段。你能帮忙吗？
代码示例：
var myNum = document.getElementById('num');
myNum.addEventListener('keyup', function(e) {
var dd =
浏览 1提问于2020-12-30得票数 1
回答已采纳
2回答
我在生命周期中的一个函数中有一个console.log，它不能工作(不显示"id")。
生活外的console.log正在正常工作。
我找不到问题出在哪里。
(function () {
document.addEventListener("DOMContenLoaded", () => {
const paramsURL = new URLSearchParams(window.location.search);
const customerId = parseInt(paramsURL.get("id&
浏览 1提问于2021-05-27得票数 0
回答已采纳
我在让OnChnage侦听器工作时遇到了问题，如果我把脚本放在</form>标签后面，侦听器就能正常工作，但是如果我把脚本放在<head>标签内，它就不能工作。
在我的网站上，我只能在<head>标签中运行脚本，有没有什么可以让脚本在<head>标签中运行？
在此配置中，脚本不起作用
<head>
<script type="text/javascript">
if(window.addEventListener) {
document.getElementById('address'
浏览 1提问于2012-08-30得票数 5
回答已采纳
2回答
我有一个页面，其中四个主要的div一个接一个地垂直堆叠。我需要在滚动时，它应该直接在div之间移动，而不是正常的滚动。
我使用插件功能，但它不能正常工作，因为我必须在滚动上做所有的操作，但在插件示例中，它使用的是按钮。
有谁知道我该怎么做吗？
我想要一个类似于这个页面的行为。
enter
浏览 7提问于2014-02-21得票数 1
我正在学习和尝试添加黑暗模式按钮到我的网站。我有工作开关按钮和CSS。但是当我想要添加到身体类“黑暗”时，切换功能不能正常工作。函数add和remove正在工作，但我不想用"if“来解决它。
const switchButton = document.querySelector(".switch")
switchButton.addEventListener("click", () => {
document.querySelector("body").classList.toggle("dark")
})
浏览 5提问于2022-04-21得票数 0
回答已采纳
这可能是一个愚蠢的问题，但我是Javascript的新手，我真的不能理解它。
因此，我的页面上有一堆Chart.js图形，我想添加一些自定义行为。我做了这样的函数来为不同的图生成不同的监听器：
const listenerPointerUp = (params) =>
evt => {
//code
}
并设置它们：
canvas.addEventListener('pointerup', listenerPointerUp(params));
但是监听器就是不能工作，尽管它们在Chrome上
直到我尝试过：
canvas.onpoi
浏览 3提问于2021-01-14得票数 0
我正在尝试使文档在单击按钮时重新加载。下面是我的代码：
var e = document.getElementById('a');
e.addEventListener('click',location.reload);
单击e后返回Uncaught TypeError: Illegal Invocation。但是，下面的代码可以正常工作，并且文档会重新加载：
var e = document.getElementById('a');//same thing
e.addEventListener('click',function(
浏览 3提问于2018-03-31得票数 1
我在jsp中使用这个脚本。有时，当我单击特定的按钮时，它可以正常工作，但有时它不能工作，并显示脚本错误: document.form是空的，而不是对象。我搜索了什么，当我调用重置时，我发现文档还没有完成加载。，如何检查文档是否加载了？
<head>
<script type="text/javascript">
function closeWarning(){
document.forms[0].reset();
}
</script>
</head>
<body onLoad=&#
浏览 1提问于2012-01-16得票数 2
回答已采纳
2回答
我已经查看了其他问题和在线，但仍然不能找出我错在哪里，我正在添加2个事件到外部加载的swf
一个能用，一个不能用？！？函数名是正确的，所以我可以看到我缺少了什么
my_loadedSwf = loadEvent.currentTarget.content as MovieClip;
my_loadedSwf.addEventListener(Event.ENTER_FRAME, my_loadedSwf.enterFrameHandler);
my_loadedSwf.addEventListener(KeyboardEvent.KEY_DOWN, my_loadedSwf.myOnPres
浏览 0提问于2011-08-26得票数 0
回答已采纳
这很奇怪？当事件侦听器在类型记录类中时，我不能让requestAnimationFrame与事件侦听器一起工作--但是如果我不在类之外，它就能正常工作吗？帮我解决这个问题，或者告诉我为什么它永远不能在一个类内工作.
class GameEngine
{
private aKey:boolean
private canvas:HTMLCanvasElement;
private ctx:CanvasRenderingContext2D;
constructor()
{
this.canvas = <HTMLCanvasEleme
浏览 1提问于2018-08-31得票数 0
回答已采纳
1回答
安卓HTML5全屏视频
、、、
我试图让我的视频流在android上以全屏模式工作。对于iOS，我使用了一个本机<video>标记，它工作得很好。
我可以在我的android上播放视频，但我没有全屏按钮。我还尝试为android设备创建自己的模板，只需将播放器的宽度和高度设置为窗口大小(假全屏)。这里的问题是，当我旋转设备时，调整的大小不能正常工作，这样我就可以滚动视频。
以下是我尝试过的：
$(document).ready(function() {
$(window).on('resize orientationchange', function() {
$('
浏览 5提问于2013-10-09得票数 1
回答已采纳
3回答
当firefox处于全屏模式时，无法覆盖firefox的退出键功能。正常吗？下面是我的代码，用来在按钮点击时取消全屏：
function cancelFullscreen() { if(document.cancelFullScreen) { document.cancelFullScreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.web
浏览 4提问于2013-09-24得票数 1
下面的ActionScript 3.0代码在Adobe Flash CS6中测试时可以正常工作，但是当在浏览器中测试时该代码不能工作。你知道为什么会发生这种情况吗？
buttonInstance.addEventListener(MouseEvent.CLICK,function(e:MouseEvent){
flash.net.navigateToURL(new URLRequest("http://facebook.com"), "_blank");
trace("link clicked");
},false,0,true
浏览 3提问于2013-03-22得票数 0
回答已采纳
1回答
我好像不能让菜单正常工作。我需要它是页外前点击，然后进入视图后点击。
目前，我已经将菜单设置为离页200px，但我似乎不能让它在点击后进入视图。
我的网站是
浏览 0提问于2015-10-08得票数 0
componentDidMount() {
document.addEventListener('mousemove', (e) => this.customCursorFollow(e));
document.addEventListener('click', this.customCursorClick);
}
componentWillUnmount() {
document.removeEventListener('mousemove', (e) =>
this.c
浏览 0提问于2020-05-20得票数 0
回答已采纳
我想跳转到标签，一旦页面上的一切加载。早些时候它工作得很好，但是一旦我在页面上添加了flexslider，代码就不能正常工作了。以下是代码
$(window).bind("load", function() {
var hash = window.location.hash;
if(hash) {
console.log(hash);
var hashlink = hash.replace('#_', '#');
console.log(hashlink);
$(
浏览 0提问于2015-11-15得票数 0
我试图让HTML打印出“德国”时，你点击按钮。但它不能正常工作。我的代码有什么问题吗？
HTML
<input type="button" value="click!" onclick="shuffle();"/>
<div id="output"></div>
Javascript
(function(){
window.onload = function(){
alert("welcome to my trip record");
}
})()
浏览 3提问于2017-04-14得票数 0
回答已采纳
1回答
例如，如果通过箭头函数传递addEventListener回调，那么一切都会正常工作，但是我不能通过removeEventListener删除侦听器。
export const actions = {
open() {
document.querySelector('nav').classList.add('open')
document.addEventListener('click', (e) => this.dispatch('clickListener', e))
},
close() {
浏览 1提问于2020-12-19得票数 2
我已经用javascript做了很长时间的pi计算器，我终于完成了。问题是我在标题部分的脚本：
document.getElementById("button").addEventListener('click', (function(){
alert('Beginning…');
}), false);
我把这个放在我的身体部分：
<input type="button" id="button" value="Calculate!!"/>
但是当我打开网页时，我会得到以下错误：
浏览 1提问于2014-01-09得票数 2
回答已采纳
我正在做一个已经实施的项目。然而，在我的机器上，我不能打开下拉菜单，也不能让某些按钮工作。这是我的application.js.coffee：
# //= require jquery
# //= require jquery.turbolinks
# //= require jquery_ujs
# //= require bootstrap
# //= require turbolinks
# //= require jquery.plugin
# //= require jquery.countdown
# //= require jquery-ui
# //= require tiny
浏览 0提问于2018-02-17得票数 1
1回答
我试图阻止右键单击Paperjs时显示上下文菜单。我尝试使用以下JS代码捕获右键单击事件： window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
console.log ('Right click');
//event.stopImmediatePropagation();
event.stopPropagation();
浏览 19提问于2020-11-29得票数 0
回答已采纳
1回答
我有以下HTML
<button id="btn" type="button">Click Me!</button>
<div id="outside">
<div id='inside" class="animated">
</div>
</div>
当我单击该按钮时，首先显示outside，然后将inside动画化。效果很好。
当我再次单击时，我首先对inside进行动画化，然后隐藏outsid
浏览 4提问于2017-12-14得票数 0
回答已采纳
我正在尝试使用react-native- push -notifications nmp module为我的项目设置推送通知。它看起来很棒，非常有用，它在android上几乎很好用，但我不能让它在ios上工作。我根据PushNotificationsIOS的文档执行所有操作，但是当我调用PushNotification.configure({..})时，它会给我这个错误：
Unhandled JS Exception: this._nativeModule.addListener is not a function.(In 'this._nativeModule.addListener
浏览 37提问于2016-08-16得票数 0
我试图在"keydown“上使用一个eventListener来更新我的状态(一个名为showMenu的布尔值)。我已经把它放在useEffect上了，但是它不能正常工作，我不知道为什么.如果我将showMenu放在useEffect末尾的数组上，它将以指数方式重新呈现该组件。如果我不把showMenu放在useEffect的末尾，showMenu将只更新一次(从false到true)。
下面是以指数方式重新呈现的代码
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {
window.a
浏览 4提问于2021-04-28得票数 2
回答已采纳
当我从seprate文件加载javascript时，它不能正常工作，但是当我从pa中加载相同的脚本时。
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
p.textContent = "Someone Clicked";
});
<!DOCTYPE html>
<html>
<bo
浏览 1提问于2018-05-15得票数 0
回答已采纳
可以将jquery集成到Titanium中吗?它能正常工作吗？否则我们不能将jquery集成到钛合金加速器中？
有谁能帮我吗？
浏览 1提问于2010-10-12得票数 3
我想切换一个导航栏点击使用一个按钮，如果导航栏已经激活，我想禁用当用户点击任何地方。事件侦听器都连接在一起，切换代码正常工作，但是实现“单击屏幕上的任何地方以关闭”功能不起作用。
编辑:我现在可以通过点击任何地方来切换，但是我不能使用按钮切换，我只能打开它而不能关闭它。
const button = document.querySelector('button.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
let menuActive = false;
b
浏览 5提问于2022-02-16得票数 0
1回答
CAF接收器:错误处理
、、、
我们已经创建了一个基于cast.framework.events.EventType.ERROR事件的带有通用错误监听器的自定义CAF接收器：
playerManager.addEventListener(cast.framework.events.EventType.ERROR, event => {
if (playerManager.getPlayerState() != "IDLE") {
let errorCode = (event.detailedErrorCode != undefined ?event.detailedErrorCode : null
浏览 9提问于2018-04-09得票数 1
以下代码在Chrome中运行正常，但在Firefox中不能正常运行。在Chrome中，当我将鼠标移动到浏览器外部和内部时，控制台中会有一些输出，但在Firefox中情况并非如此。我的Firefox版本是85.0.2。任何帮助都将不胜感激。
document.addEventListener("mouseenter", () => {
console.log("mouseenter");
});
document.addEventListener("mouseleave", () => {
console.log("
浏览 0提问于2021-02-17得票数 1
我对javascript很陌生，我不使用jQuery。
当我点击按钮时，我试图让我的函数btnHandle()运行。
然而，我发现
btn.onclick = btnHandle();
是不同的
<button id="sort-btn" onclick="btnHandle()">submit</button>
当我使用btn.onclick = btnHandle();时，当我不单击按钮而刷新代码时，就会执行btnHandle()函数。
我只希望在单击按钮时才执行该函数。
<button id="sort-btn"
浏览 0提问于2016-07-21得票数 0
回答已采纳
下面是运行问题的链接：
我创建了一个类：
class button {
constructor(){
var button_id = 99;
document.getElementById("bu1")
.addEventListener( "click", this.bu_clicked(button_id) );
}
bu_clicked(button_id){
alert("Hallo: " + button_id);
浏览 1提问于2018-06-20得票数 0
回答已采纳
有没有人遇到过javascript函数在Phonegap/iOS 4.3上不能工作的问题？我已经在我的Safari浏览器中测试了我的javascript，它工作正常。但当我在iOS模拟器或我的iPod触摸屏上尝试它时，它不起作用。
下面是我的代码:在head中：
function sayingHi(){
alert("This is saying hi!");
}
HTML：
<button onclick="sayingHi();">Saying hi</button>
如果我在中创建javascript，它
浏览 0提问于2011-10-16得票数 0
1回答
我想将类添加到这个li和.nav-link类中。我使用的是JS，但我不知道为什么这段代码不能正常工作。P.s:我是JavaScript的新手
<script>
const navLink = document.querySelector('.nav-link');
navLink.addEventListener("click", reveal);
function reveal(ev) {
ev.classList.add("open");
浏览 3提问于2020-12-30得票数 0
我正在尝试让这段代码工作，但是当我点击选中的数据时，数据并不能正常工作(在.screen上显示.grid-element - addEventListener )。 let display = document.querySelector(".screen");
let numberPress = document.querySelector(".grid-element");
numberPress.addEventListener("click", function(){
display.innerHTML = numbe
浏览 24提问于2021-03-16得票数 0
回答已采纳
我有这个jquery代码片段，如果我取消对第一个preventDefault()的注释，它会正常工作，但是我试图调用第二个preventDefault()，但是它不能工作。见下文：
$(document).ready(function () {
$('#btnSubmit').click(function (event) {
if ($('#tracking').val() != "") {
// FIRST preventDefault()
//event.preventD
浏览 0提问于2018-05-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
