Question

我有第一个按钮，我在其中添加一个事件监听器来执行foo函数。 foo函数只在控制台中显示一个数字。

我有第二个按钮用于删除添加的事件监听器。

这里的代码非常简单：

<input type="button" value="Click here" id="button">

<input type="button" value="Remove Event Listener" onclick="removeEventListener();">

<script type="text/javascript">

number = 0;

//Function to display number in console :
function foo()
{
    number = number+1;

    console.log(number);    
}

//The button :
button = document.getElementById("button");

//Add event listener to the button :
button.addEventListener("click", foo);

//Function to remove event listener :
function removeEventListener()
{
    button.removeEventListener("click", foo);   
}

</script>

您可以尝试：https://jsfiddle.net/6m8z8qgn/

但是当我点击第二个按钮删除事件监听器时，添加到第一个按钮的事件侦听器未被删除，因此当我单击第一个按钮时，控制台会再次显示数字。

一个想法？诚挚地谢谢你们。

Answer 1

将方法removeEventListener的名称更改为其他名称。否则它被称为javascript内部方法。

function renameThis（）

Answer 2

removeEventListener是JavaScript中的保留关键字。

尝试别的。

<input type="button" value="Remove Event Listener" onclick="anotherName();">
<input type="button" value="Click here" id="button">
<script type="text/javascript">

number = 0;

//Function to display number in console :
function foo()
{
number = number+1;

console.log(number);    
}

//The button :
button = document.getElementById("button");

//Add event listener to the button :
button.addEventListener("click", foo);

//Function to remove event listener :
function anotherName()
{
    button.removeEventListener("click", foo);   
}

Javascript：removeEventListener不起作用

2 个答案: