javascript - 为什么来电每次都翻倍？

Question

此处显示:JS Fiddle

这是我们关心的代码:

    doit1();

    function doit2(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").addClass("highlighted");
            $("#evtTarget").on("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You Turned on the hover effect!</p>");
            doit1();
        });}

    function doit1(){
        $("#evtTarget").on("click", function(evt) {
            $("#evtTarget").off("mouseover mouseleave", highlight);
            $("#evtTarget").html("<p>You shut off the hover effect!</p>");
            $("#evtTarget").removeClass("highlighted");
            console.log("check");
            doit2();
        });}

关于这段代码，我无法弄明白，它来回调用并且每次都加倍调用。这最终会破坏页面。为什么会这样，我该如何做得更好？

Answer 1

您的代码有点“可重入”...您只需设置一次onClick...

尝试:

$(function() {
  turnItOn();

  $("#evtTarget").on("click", function(evt) {
    if ($("#evtTarget").hasClass("highlighted")) {
      turnItOff();
    } else {
      turnItOn();
    }
  });
});
function turnItOn() {
  $("#evtTarget").addClass("highlighted");
  $("#evtTarget").on("mouseover mouseleave", highlight);
  $("#evtTarget").html("<p>You Turned on the hover effect!</p>");
}

function turnItOff() {
  $("#evtTarget").off("mouseover mouseleave", highlight);
  $("#evtTarget").html("<p>You shut off the hover effect!</p>");
  $("#evtTarget").removeClass("highlighted");
}

function highlight(evt) {
  $("#evtTarget").toggleClass("highlighted");
}

正如在这个版本的 fiddle 中看到的:

https://jsfiddle.net/pnz9eooz

或者像我写这篇文章时 Alon 建议的那样关闭事件 :)