具有多个值的JS var

Question

有件事我无法理解：

我有一个打开同一页面的功能

<div id="page">

但具有不同的内容，具体取决于菜单中单击的按钮：

<nav>
    <button onclick="openPage(1)">PAGE 1</button> 
    <button onclick="openPage(2)">PAGE 2</button>
    <button onclick="openPage(3)">PAGE 3</button>
</nav>

然后是函数：

function openPage(p){

    var move=0;  // define a var for USER action

    if(p==1){
         document.getElementById('page').innerHTML = text_1;  // content preloaded
    }
    else if(p==2){
         document.getElementById('page').innerHTML = text_2;
    }
    else if(p==3){
         document.getElementById('page').innerHTML = text_3;
    }

    // then on the top of the page (absolute + z-index) I add a HTML object:

    document.getElementById('page').innerHTML += '<aside id="pictures">content</aside>';

    // what I'm now trying to do is to remove this object once USER move its mouse on it 

    document.getElementById('pictures').addEventListener("mousemove",function(event) {
       setTimeout(function(){
          move+=1;  // increase the val each second
       },1e3)
       console.log('move'+p+' = '+move)  // control value
       if(move>100){
          document.getElementById('pictures').style.display = "none";  // OK, it works
          move=0;  // reinit the var
       }
   });  
}

现在惊喜：

第 1 页的控制台

   move1 = 0
   move1 = 1
   ...
   move1 = 99
   move1 = 100    //  'pictures' disappears

第 2 页的控制台

   move1 = 41
   move2 = 0
   ...
   move1 = 58
   move1 = 17
   ...
   move1 = 100    //  'pictures' disappears
   move2 = 59

第 3 页的控制台

   move1 = 15
   move2 = 88
   move3 = 0
   ...
   move1 = 37
   move2 = 100    //  'pictures' disappears
   move3 = 12
   ...

我的 var 'move' 同时获得 3 个值...这怎么可能？

Answer 1

您的问题的原因是您每次调用

openPage

 函数时都会添加一个事件侦听器。这意味着，如果您单击多个按钮，每个按钮都会有自己的事件侦听器附加到 

#pictures

 元素。现在，当触发 

mousemove

 事件时，所有这些侦听器将同时执行，导致 

move

 变量每秒递增多次。

解决此问题的方法是在添加新事件侦听器之前先

删除现有的事件侦听器。

let handler; // to hold the event listener function
const pictureEl = document.getElementById('pictures');

function openPage(p){

   // Remove existing event listener
   if (handler) { // <-- Check here
       pictureEl.removeEventListener("mousemove", handler);
   }
   
   handler = function(event) {
       // ...Rest
       }
   };
   // Add new event listener
   pictureEl.addEventListener("mousemove", handler);
// ...rest

Answer 2

找到了另一种（最简单的？）方法：

 var move=0;  // placed out of functions

 function openPage(p){
     .... (same as previous)
     getElementById('pictures').addEventListener("mousemove",outPicts);  // change
 }

 // put mousemove event in another function:

 function outPicts(p){
    setTimeout(function(){
        move+=1;
    },1e3)
    console.log('move = '+move)
    if(move>100){
        document.getElementById('pictures').style.display = "none";
        // then remove event
        getElementById('pictures').removeEventListener("mousemove",outPicts);
        move=0;  // reinit the var
     }
  }

按预期工作