<!DOCTYPE html>
<html>
<body>
我想使用带有点击事件的循环函数在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>
如果要在两者之间切换，则需要使用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);
}