Question

<!DOCTYPE html>
<html>
<body>

我想使用通过click事件循环的函数在myFunction1和myFunction2之间切换

<p id="demo">Click me.</p>
    <p id="demo1">Click me.</p>

在此脚本中，我使用了addeventlistner函数

    <script>
document.getElementById("demo").addEventListener("click", myFunction1);

function myFunction1() {
   document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
  document.getElementById("demo").addEventListener("click",myFunction2);
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME2!";
  document.getElementById("demo").addEventListener("click",myFunction1);
}

document.getElementById("demo1").addEventListener("click",myFunction3);

function myFunction3() {
   document.getElementById("demo1").innerHTML = "YOU CLICKED ME3!";
  document.getElementById("demo1").onclick = function(){myFunction4()};
}
function myFunction4() {
  document.getElementById("demo1").innerHTML = "YOU CLICKED ME4!";
  document.getElementById("demo1").onclick =function(){myFunction3};
}

</script>

</body>
</html>

Answer 1

如果要在两者之间切换，则需要使用removeEventListener来删除先前的处理程序；否则，您将只能同时拥有两者。参见***行：

document.getElementById("demo").addEventListener("click", myFunction1);
function myFunction1() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
  document.getElementById("demo").removeEventListener("click",myFunction1); // ***
  document.getElementById("demo").addEventListener("click",myFunction2);
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME2!";
  document.getElementById("demo").removeEventListener("click",myFunction2); // ***
  document.getElementById("demo").addEventListener("click",myFunction1);
}

实时示例：

document.getElementById("demo").addEventListener("click", myFunction1);
function myFunction1() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
  document.getElementById("demo").removeEventListener("click",myFunction1); // ***
  document.getElementById("demo").addEventListener("click",myFunction2);
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME2!";
  document.getElementById("demo").removeEventListener("click",myFunction2); // ***
  document.getElementById("demo").addEventListener("click",myFunction1);
}

<button type="button" id="demo">Click Me</button>

不过，一个更简单的解决方案可能是使用一个标志并基于该标志调用适当的函数：

let flag = false;
document.getElementById("demo").addEventListener("click", function(event) {
    flag = !flag;
    (flag ? myFunction1 : myFunction2)(event);
});
function myFunction1() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME2!";
}

实时示例：

let flag = false;
document.getElementById("demo").addEventListener("click", function(event) {
    flag = !flag;
    (flag ? myFunction1 : myFunction2)(event);
});
function myFunction1() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME2!";
}

<button type="button" id="demo">Click Me</button>

此位：

(flag ? myFunction1 : myFunction2)(event);

基本上是：

if (flag) {
    myFunction1(event);
} else {
    myFunction2(event);
}

为什么我的addEventListner不能用作onclick事件

1 个答案: