错误的事件侦听器执行

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);

然后找到callback里面的按钮是什么

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);
}