addEventListener被触发两次
addEventListener是JavaScript中的一个方法，用于向指定的元素添加事件监听器。当指定的事件发生时，该监听器会被触发。
addEventListener被触发两次的情况可能有以下几种原因：
- 重复绑定事件监听器：如果在代码中多次调用addEventListener方法，绑定了相同的事件监听器到同一个元素上，那么当事件发生时，监听器会被触发多次。解决方法是在绑定事件监听器之前，先检查是否已经存在相同的监听器，如果存在则不再重复绑定。
- 事件冒泡或捕获阶段重复触发：当一个元素上的事件被触发时，事件会在DOM树中进行传播，分为捕获阶段和冒泡阶段。如果在DOM树的某个层级上存在多个相同类型的元素，并且它们都绑定了相同的事件监听器，那么事件在传播过程中可能会触发多次。解决方法是在事件监听器中使用event.stopPropagation()方法停止事件的传播，或者在捕获阶段使用addEventListener的第三个参数设置为true，以确保只有最外层的元素触发事件。
- 事件委托导致重复触发：事件委托是指将事件监听器绑定到父元素上，通过事件冒泡机制来处理子元素的事件。如果在事件委托的过程中，子元素和父元素都绑定了相同的事件监听器，那么事件在传播过程中可能会触发多次。解决方法是在事件委托的监听器中，通过event.target属性判断事件源是否是期望的子元素，如果是则执行相应的逻辑。
总结起来，当addEventListener被触发两次时，可能是由于重复绑定事件监听器、事件冒泡或捕获阶段重复触发、事件委托导致重复触发等原因。在编写代码时，需要注意避免这些情况的发生，以确保事件只被触发一次。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（TPNS）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
4回答
只需将窗口(在jQuery中)绑定到popstate，事件总是被触发两次。
$( window ).bind( 'popstate', myFunction );
在myFunction()中没有任何东西会导致这种情况--我试着把这个函数简化成一个简单的：
console.log( 'triggered' );
结果是一样的。它总是被触发两次(在Safari，Chrome和Firefox中测试过)。
我知道HTML5历史应用程序接口有问题，但是除了“尝试History.js”之外的任何建议都会得到我们的感谢！
浏览 1提问于2012-02-11得票数 4
回答已采纳
我正在用Lua开发一个简单的应用程序，以便更好地感受Corona SDK:一个红色的球在屏幕上弹来弹去，一旦用户触摸它，就会切换方向。但是，每当我单击Corona Simulator中的球时，触摸事件都会不止一次被调用。下面是我的代码：
local xdirection,ydirection = 1,1
local xpos,ypos = display.contentWidth*0.5,display.contentHeight*0.5
local circle = display.newCircle( xpos, ypos, 20 );
circle:setFillColor(255,0,
浏览 0提问于2013-05-24得票数 1
回答已采纳
什么。我有3个框：blue、red和black，我试图使用JavaScript事件侦听器依次转换它们：black、red和blue。
HOW：
基本的HTML结构和嵌套(完整示例的pen)：
<div id="container">
<div id="blue"></div>
<div id="red">
<div id="black"></div>
</div>
</div>
Java
浏览 7提问于2022-04-01得票数 0
回答已采纳
我正在尝试通过服务器发送的事件获取数据，这有什么不同
source.onmessage vs source.addEventListener
浏览 25提问于2013-11-21得票数 25
1回答
我需要为应用程序使用History API。我的问题是一些"home“jQuery插件已经为popstate实现了一个事件。
对于唯一的视图，有可能有多个popstate事件？
浏览 4提问于2017-01-04得票数 5
回答已采纳
由于某些原因，在将参数传递给匿名函数时，事件侦听器会为每个元素触发两次。也就是说，元素el上的单击事件将注册一次，从而触发一次。
el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);
但是如果我想把我自己的参数传递给它，它会注册并触发两次。
el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventL
浏览 0提问于2014-10-02得票数 15
回答已采纳
2回答
我想知道为什么不允许在单个节点上有多个类似的eventListeners？我设想的情况是，我有相同类型的多个部分，它们使用单个节点通过CustomEvents相互通信。但这似乎不起作用，因为他们都共享相同的EventListener，因此只有其中一人能够监听和处理事件。
为什么会这样呢？
谢谢!
编辑:小代码片段：
我有过
node.addEventListener("customEvent", this.func, false);
和
node.addEventListener("customEvent", this.func, false);
在两个不同的位
浏览 8提问于2015-01-04得票数 0
回答已采纳
我有两个事件侦听器，一个用于Click事件，另一个用于Touch事件。它们都应该运行相同的函数，但只能运行一次。如果它们在某些设备上都为真，则它会运行该函数两次。
我希望能够单击一个按钮并侦听两个事件侦听器，但如果其中任何一个被触发，则仅运行函数一次。
window.addEventListener("click", function(event) {
myFunction();
});
window.addEventListener("touchstart", function(event) {
myFunction();
});
funct
浏览 0提问于2019-07-18得票数 1
我正在学习和尝试添加黑暗模式按钮到我的网站。我有工作开关按钮和CSS。但是当我想要添加到身体类“黑暗”时，切换功能不能正常工作。函数add和remove正在工作，但我不想用"if“来解决它。
const switchButton = document.querySelector(".switch")
switchButton.addEventListener("click", () => {
document.querySelector("body").classList.toggle("dark")
})
浏览 5提问于2022-04-21得票数 0
回答已采纳
1回答
我正在尝试使用以下代码返回我的react本机应用程序中的以前的视图。
'use strict';
var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
Text,
View,
BackAndroid,
Navigator
} = React;
var HomePage = require('./HomePage');
class DetailsPage extends Component{
浏览 2提问于2016-02-25得票数 1
回答已采纳
考虑到以下几点：
object.addEventListen(eventType01,handler01);
object.addEventListen(eventType01,handler01);
object.removeEventListener(eventType01,handler01);
对象上有多少个eventType01的事件侦听器？一还是零？
浏览 0提问于2011-04-29得票数 10
回答已采纳
我需要听听WooCommerce的定制事件，比如wc_fragment_refresched或added_to_cart。但是，当通过本机addEventListener为这些事件创建侦听器时，什么都不会发生。但是jQuery的.on()运行得很好。
工作：
jQuery(document.body).on('wc_fragments_refreshed', function() {
console.log("hehey!");
});
不起作用：
document.body.addEventListener('wc_fragments_refres
浏览 2提问于2021-01-08得票数 1
回答已采纳
在第一次onClick之后，将显示模式。然后，当在其外部单击时将其移除。然而，尽管该按钮不是模式的子级，但它的onClick无法更新this.state.changed并删除div。为什么？Codepen：https://codepen.io/Matt-dc/pen/KJYxqv class Modal extends React.Component {
setWrapperRef = (node) => {
this.wrapperRef = node;
}
componentWillMount = () => {
document.addEv
浏览 27提问于2019-02-21得票数 0
2回答
提交按钮两次
、、
我有以下提交的材料：
<input type="submit" id="buttonNext" name="buttoncrd" value="Prosegui" class="buttonNavProsegui block-ui"/>
当您在页面上时，我希望激活带有键盘按钮"Entry“的submit，因此我编写了以下简单的js代码：
$(document).ready(function() {
$(document).keypress(function(event){
浏览 2提问于2017-11-22得票数 1
回答已采纳
2回答
我正在尝试写在网站上阻止用户正常滚动的机制。当用户向下或向上滚动时，站点会顺畅地滚动到下一张或上一张幻灯片(取决于滚动方向)，并在那里停止(就像你点击导航栏一样)。查看实时预览：
但是有一个恼人的问题。它在FF中几乎工作得很好(没有跳转)，但在其他浏览器(Chrome，Safari，IE)中会中断-它会跳转。我怎样才能防止这种情况发生呢?下面是我的代码片段。我有一个禁止滚动的ScrollControl对象：
scrollControl = {
keys : [32, 37, 38, 39, 40],
scrollTimer : 0,
lastScrollFireTi
浏览 1提问于2012-10-05得票数 0
1回答
Django评论信号发射两次
、、、、
我已经为django.contrib.comments信号(comment_was_posted和comment_will_be_posted)附加了一个处理程序。每个处理程序被调用两次。我似乎不知道为什么，也不知道如何判断我是在第一次还是第二次通话中。我只想运行一次代码。任何反馈都将不胜感激。
浏览 17提问于2014-05-07得票数 0
1回答
有没有人知道为什么我的JS函数在手机上不起作用？它在台式机上运行良好，但在Iphone/android手机上没有响应。我需要添加一些东西才能被手机理解吗？ init-button.js： const initButton = () => {
const toggleBtn = document.querySelector('#toggleBtn');
const divList = document.querySelectorAll('.discover');
toggleBtn.addEventListener('click'
浏览 29提问于2021-04-11得票数 0
1回答
我和Phonegap有个奇怪的问题。我的XMLHttpRequests触发了两次；我正在开发的一个应用程序中使用XMLHttpRequests来创建要选择的事件的动态列表。jQuery也是我正在使用的库之一。
每当我使用XMLHttpRequest时，无论是普通的还是jQuery的，它都会执行两次，即使它应该只运行一次。有没有其他人遇到过这个问题？
下面是一些示例代码：
(function(){
var request = new XMLHttpRequest();
request.open("GET", "http://{site-url-hidden
浏览 0提问于2012-11-27得票数 1
回答已采纳
当使用上面的代码时，"mouseenter“和"mouseleave”在start时触发一次。"onmouseenter“和"onmouseleave”在预期的时候被触发。我如何让"mouseenter“和"mouseleave”在期望的时候触发？
<!DOCTYPE html>
<html>
<body>
<div id="banner" style="border: 2px solid black; height: 200px"></
浏览 1提问于2017-12-25得票数 3
我在MDN网站上读到一篇文章，讨论如何在javascript 中定制事件，并创建了以下内容
const evt = new CustomEvent("swipe", {
detail: {
color: "red"
}
});
documet.addEventListener("swipe", e => {
console.log(e.detail);
});
document.dispatchEvent(evt);
但问题是，事件是立即触发的，我如何通过定义swipe的真正含义
浏览 1提问于2020-08-29得票数 0
回答已采纳
如果我有一个调用
addEventListener(Event.ENTER_FRAME, update);
addEventListener(Event.ENTER_FRAME, update);
这会增加2个监听器吗？
浏览 0提问于2010-05-05得票数 12
回答已采纳
1回答
画布鼠标事件
、、、、
试图解决的问题，当鼠标离开画布元素与鼠标向下；然后鼠标被释放(鼠标)离开画布元素，当鼠标被移动回到画布元素时，它认为鼠标还在下降。
本例中的修正是鼠标向上移动和鼠标向下移动来自文档，而不是画布，但是html5滑块对画布元素的影响是怎样的--鼠标输入(定位)。
见这里；
浏览 3提问于2014-04-15得票数 0
回答已采纳
有些键同时触发onKeyDown和onKeyPress事件，例如A，而有些键只触发onKeyDown，例如SHIFT。我如何检查onKeyPress是否因某个特定的密钥而被解雇？我需要在键一按下就检测到它，所以我不能使用onKeyUp，因为延迟。
浏览 1提问于2016-08-06得票数 1
如果有两个事件被分派，是否可以监听？
例子：
当益智=真-> dispatchEvent(new Event("the first"));
当puzzle2 = true -> dispatchEvent(new Event("the second"));时
然后：
如果“第一个”是分派，那么做某事如果“第二个”是分派
如果“第一”和“第二”是分派的话，那就做另一件事。
浏览 0提问于2014-01-31得票数 0
回答已采纳
我完全知道在注册后立即触发函数onAuthStateChange，但事实并非如此。我有一个问题，这个函数在用户使用他们的用户名和密码登录后触发两次。第一次启动时，我回溯到堆栈，它来自我的代码，但第二次，它来自Firebase JS文件本身。我很困惑，因为我不明白为什么它们会启动。我使用的是Firebase的web版本。下面提供了代码。
TL;DR:我正在使用Firebase的web版本。在用户使用用户名和密码登录后，函数onAuthStateChange会触发两次。
// callback function
firebase.auth().onAuthStateChanged(function
浏览 3提问于2016-12-14得票数 1
我正在尝试创建一个Chrome扩展，我需要事件处理程序在每个加载页面上侦听。目前，(为了测试目的)我有以下内容：
function onPageLoad(event)
{
alert("Page Loaded");
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener("DOMContentLoaded", onPageLoad, true);
});
然而，这并没有显示出警告信息，我也不能因为我的提升
浏览 0提问于2014-09-25得票数 0
回答已采纳
window.addEventListener("wheel",function(){
console.log("wheel");
window.addEventListener('scroll', function(e){
console.log("scroll");
});
})
当鼠标轮第一次被操作时，我认为只有“轮子”被显示，而window.addEventListener("scroll",function(){...})只需要注册。然而，从输出来看，“轮子”和“滚动”是同
浏览 1提问于2020-07-11得票数 1
回答已采纳
1回答
我正在开发一个应该在移动设备上运行的React JS应用程序。
下面是该应用程序的代码摘录：
index.tsx：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
浏览 4提问于2022-02-13得票数 1
我在文本框上定义了一个focusout事件处理程序，在一个按钮上定义了一个click处理程序。如果我将焦点放在文本输入中，然后直接单击按钮，那么这两个事件都会像预期的那样被触发。focusout事件首先被触发，如果打开developer工具栏，则会触发click，否则它会以反之亦然的方式触发。
这背后的真正原因是什么？
下面是提问的片段，但我相信问题本身已经足够清楚了：
document.getElementById('myInput').addEventListener('blur', function(){ alert("Input Focuse
浏览 3提问于2017-03-02得票数 3
4回答
这些把戏对我都没用..。
var audio=new Audio("sample.mp3");
audio.addEventListener('onreadystatechange',function({alert(audio.duration);});
if(audio.readyState===4){alert(audio.duration);}
audio.onreadystatechange=function(){alert(audio.duration);};
当数据可用时(当audio.readyState===4)，我想要执行音频持续时间警报。好
浏览 1提问于2015-04-29得票数 1
回答已采纳
2回答
您好，感谢您阅读这个问题。
我有一个需要在画布上检测鼠标坐标的用例，感谢@Carlos Martinez：它按预期工作。
我试图更进一步，检测用户是否点击画布，然后使用h2将其放入状态，并将其记录下来；以下是我尝试过的代码：
import React from 'react';
class Canvas extends React.Component {
//A canvas to display images with a title
constructor(props) {
super(props);
this.st
浏览 0提问于2018-03-09得票数 3
我想避免双击也会触发一个单击事件。 我发现一个简单的解决方案是用计时器延迟点击，如果双击被触发，则销毁计时器。 var pendingClick;
function myclick(){
clearTimeout(pendingClick);
pendingClick = setTimeout(function(){
console.log('click');
}, 500);
}
function mydblclick(){
clearTimeout(pendingClick);
console.log('double
浏览 72提问于2020-04-27得票数 0
我正在以编程方式创建一个UITextField，将其添加到视图中，然后通过调用
[textField becomeFirstResponder];
但问题是这个调用触发了对textFieldDidEndEditing: delegate方法的调用。堆栈跟踪指向由becomeFirstResponder调用的[textField _resignFirstResponder]。这是在模拟器和iOS 7上发生的。我该如何避免这种情况？这导致了很多问题，因为我不希望在不使用键盘的情况下调用textFieldDidEndEditing:。
编辑:这是我创建UITextField的方法。
浏览 5提问于2013-12-23得票数 0
1回答
我正在构建聊天应用程序。要打开聊天用户，请单击按钮并打开带有聊天功能的iframe。此时，我在主窗口中用user_id设置了cookie。在iframe的聊天应用程序中，我有一个带有回调功能的定时器，它可以检查是否设置了cookie。如果设置了cookie，则应用程序通过user_id打开与用户的新聊天并删除cookie。它工作得很好。
但当用户打开2个或更多选项卡时，应用程序仅在一个选项卡中打开聊天，因为cookie在该选项卡中被删除。我可以延迟删除cookie，但我没有这样做。
我怎样才能找到这个问题的解决方案呢？
浏览 1提问于2014-10-01得票数 0
1回答
为什么事件具有on前缀，比如onclick：
<button onclick="displayDate()">The time is?</button>
在W3Schools上，它明确指出onclick是一个事件，下面是一个屏幕截图：
但是在MDN上，它说click是一个事件。
所以我的问题是：
哪个是真正的事件，onclick还是click？
为什么我们在HTML中使用onclick，而在JavaScript中使用click，就像这样？
Button.addEventListener(单击，事件=> {.；})；
为什么不像这样
浏览 3提问于2019-10-25得票数 2
回答已采纳
我编写了一个使用jQuery的Chrome扩展程序。当我在一个特定的网站上(在线而不是本地)并按F4时，扩展将打开一个新的选项卡，并从本地web服务器加载一个页面。这部分工作正常。
新页面打开后，我想在其中运行一个jQuery click，但我很难找到如何做到这一点。到目前为止，我已经：
console.log ('F4 Pressed')
window.open('http://192.168.1.100/testserver', '_blank');
window.onload = $('#button').click()
当
浏览 0提问于2020-07-28得票数 1
回答已采纳
因此，正如标题所述，在使用setInterval和transitionend事件时，清除间隔有问题，我有一段代码，其中我在window.onload函数中声明了一个名为interval的变量，我希望在某些条件变为真时清除该间隔，但问题是，该间隔没有被清除，函数继续运行。下面是我的代码片段。
window.onload = () => {
let number = 0;
const container = document.querySelector(".container");
container.style.opacity = 1;
co
浏览 2提问于2021-05-21得票数 0
回答已采纳
1回答
我有一个用户日志表，它向每个用户操作插入一条记录，但有时它会复制插入的记录。
我的代码非常简单
<script>
db.transaction(function(tx) {
tx.executeSql('INSERT INTO tab_log (date_occurrence,hour_occurrence,number_user,occurrence,obs_occurrence) VALUES (?,?,?,?,?)', [var_date, var_hour, var_number_user, var_occurrence, var_o
浏览 47提问于2018-09-10得票数 0
1回答
我的事件不会自动加载。当我在render()方法的末尾添加delegateEvents()时，它工作了一段时间。我不想使用delegateEvents，但是现在，即使使用delegateEvents，事件也无法加载。
我估计DOM在当时是未知的，所以事件没有绑定，但是我如何检查(调试)呢？
查看：
class EditGroup extends BaseView
initialize: ->
@render()
render: ->
html = _.template tpl, @model.toJSON()
@$e
浏览 0提问于2013-01-31得票数 0
回答已采纳
我一直在我的React + Typescript中实现MGT工具包。这一切都很好，但我已经尝试在卡片的模板中添加一个按钮。但是onClick似乎不起作用，我认为这与它是一个模板有关。
我看到可能会有问题，因为它是一个可能被复制的模板，但我认为下面的工作将是很好的。但是无论我得到什么我都不能从
const mgtPersonRef = useRef<null | MgtPerson>(null);
useEffect(() => {
const mgtPerson = mgtPersonRef.current;
if (mgtP
浏览 6提问于2020-02-11得票数 0
回答已采纳
我试图用包括线性梯度在内的样式制作一个动态的div元素。应该用一个按钮动态显示它，但是不添加渐变。
var x = document.getElementById("btn");
x.addEventListener("click", addbox);
function addbox() {
var y = document.createElement("Div");
y.id = "div1";
y.style.border = "1px";
y.style.borderRadius
浏览 2提问于2020-07-07得票数 1
回答已采纳
当第二个事件被点击时，我正在尝试触发第一个事件侦听器。目前，我正在尝试使用second中指定的索引来调用第一个事件侦听器：
allGallerySlides.forEach((val, i) function(){
val.addEventListener('click', function(){
//some stuff to do
});
});
allSlideInfos.forEach((val, i) function(){
val.addEventListener('click', function(){
浏览 16提问于2021-05-26得票数 0
1回答
我有一个可以记录来电和呼出语音呼叫的应用程序，当我尝试在android 5.1.1上运行它时，它在带有棉花糖或更高versions.But的设备上工作得很好，它给出了错误，应用程序停止响应。
The error shown in logcat is-ava.lang.RuntimeException: Unable to start service com.android.hitech.calls.Unused.MyRecordingService@2cb0b090 with Intent { cmp=com.android.hitech.calls/.Unused.MyRecordingS
浏览 10提问于2018-05-18得票数 1
1回答
问题：
当我通过选择listview中的第一个元素按代码触发更改事件时，事件只会触发一次。当我通过单击listview项触发更改事件时，更改事件将被触发两次。
知道什么能引发第二次事件吗?如何防止？
HTML代码：
<div id="overview">
<div id="listView"></div>
</div>
<!-- Used lib source loaded from lib server, for developers -->
<link rel="styles
浏览 1提问于2013-10-04得票数 0
回答已采纳
2回答
标签里有个复选框。我将单击事件的事件侦听器添加到标签中，以便触发类。
当我单击复选框时，它确实有效。
但是，如果我单击标签，什么都不会改变。考虑到事件被绑定到标签而不是复选框，为什么会这样呢？
const formCheck = document.querySelector('.drinos-checker')
formCheck.addEventListener('click', function () {
formCheck.classList.toggle('checkerActive')
})
.checkerActive
浏览 9提问于2022-04-08得票数 3
回答已采纳
2回答
很简单，就是不能让它工作，在文档中看不到任何信息。如何通过代码在按钮上触发点击事件？
我试过了：
btn.fireEvent('click');
按钮已经有了一个事件侦听器，我想让它在应用程序处于特定状态时在侦听器中运行代码。
浏览 0提问于2013-06-25得票数 2
回答已采纳
1回答
我在做我自己的模式。但我需要为我的模式的事件，就像在引导模式的事件。因为一旦我自己的模式被展示给用户，我想要发生一些事情。
我的问题是，这些引导模态事件与普通香草js的等效性是什么？
show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal
浏览 2提问于2021-05-21得票数 0
回答已采纳
我有个关于unidac的uniQuery的问题
当uniQuery打开时，如果一个DataSource组件被链接，那么DataSource.onDataChange将触发2次，而ADOQuery只触发1次，为什么？
环境：
发援会:6.4，7；
德尔菲: 7，xe 10.1柏林
浏览 0提问于2017-08-30得票数 0
1回答
下面的代码
在计算机中，我可以通过检测鼠标来禁用滚动iframe时的身体滚动
在移动设备中，我试图通过检测身体中的触摸来禁用身体滚动，但不是工作。如果我触摸simulator之外的点，我可以看到h1更改为auto，如果我触摸simulator，h1不会更改为auto。
有什么建议可以解决这个问题吗？
<!DOCTYPE html>
<html>
<body>
<section>
<iframe id="simulator" style="background: #0
浏览 10提问于2018-05-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
