错误的事件监听器执行

Question

我有以下代码：

<script type="text/javascript">
        var total = 0;

        document.getElementById("pic1").addEventListener("click",
                choix(1), null);
        document.getElementById("pic2").addEventListener("click",
                choix(2), null);
        document.getElementById("pic3").addEventListener("click",
                choix(3), null);
        document.getElementById("pic4").addEventListener("click",
                choix(4), null);

        function choix(num) {
            switch (num) {
            case 1:
                total = total + sessionStorage.getItem("prix1");
                break;
            case 2:
                total = total + sessionStorage.getItem("prix2");
                break;
            case 3:
                total = total + sessionStorage.getItem("prix3");
                break;
            case 4:
                total = total + sessionStorage.getItem("prix4");
                break;
            default:
                break;
            }
            alert(total);
        }


    </script>

假设我创建了4个项目（使用localStorage.setItem方法），问题是我显示了4个警报，即使没有点击任何div！

有什么问题？谢谢！

Answer 1

问题

您正在执行choix并将返回值传递给addEventListener方法，而不是传递对函数本身的引用。

document.getElementById("pic1").addEventListener("click",
                choix(1), null);

实施例

你正在做的是完全相同的：

function sayHello(lang){
  if(lang == "en")
    return "Hello";
  else if(lang == "it")
    return "Ciao";
  else if(lang == "es")
    return "Hola";
  else
    return "";
}


console.log( sayHello("en") ); // Prints "Hello"

我们将sayHello的返回值传递给console.log

解决方案

您应该以这种方式调用它

document.getElementById("pic1").addEventListener("click", choix);

然后找回回调中的按钮

var total = 0;


function choix(num) {

  var btnID = this.getAttribute('id'); // Get Button ID
  var index = btnID.substr(3); // Cut out "pic"
  
  total = total + sessionStorage.getItem("prix"+index);

  alert(total);
}