按住按钮并更改查询选择器

Question

基于问题press and hold button javascript 和小提琴http://jsfiddle.net/0bs3omjj/1/ 我想将代码更改为另一个场景。我想检查 button1 是否为 onmousedown - 按住 - onmouseup，如果是...查询选择器应更改为下一个按钮

我试过了

<div id="myDIV">
<button class="myButton">button 1</button>
<button class="myButton">button 2</button>
<button class="myButton">button 3</button>
<button class="myButton">button 4</button>
</div>

和 JavaScript

var mouse_is_down = false;
var current_i = 0;    
var buttoncounter = 1;
var button = "";
var buttoncount = 0;

function changebutton() {
 var x = document.getElementById("myDIV").querySelectorAll(".myButton");
 x[buttoncount].style.backgroundColor = "red";
 button = x[buttoncount];
 buttoncount++;
}

changebutton();

button.onmousedown = function(){
 mouse_is_down = true;
 console.log("mousedown" + buttoncounter);

setTimeout(
    (function(index){
        return function(){
            if(mouse_is_down && current_i === index){
                //do thing when hold
                console.log("hold" + buttoncounter);
                console.log(button);

            }
        };
    })(++current_i), 500); // time you want to hold before fire action
};

button.onmouseup = function(){
 mouse_is_down = false;
 current_i++;

 console.log("onmouseup" + buttoncounter);

 console.log("change selector");
 buttoncounter++;
 changebutton();
 console.log(button); 

};

但查询选择器仅响应第一个按钮（单击并按住） - 但 javascript 会更改其他按钮的颜色值。怎么了？

Answer 1

首先，不要多次使用同一个ID。

其次，您走在正确的道路上，只需将 onmouseup 和其他调用放在您的 changebutton() 函数中即可：

您的 HTML：

<div id="myDIV">
  <button class="myButton">button 1</button>
  <button class="myButton">button 2</button>
  <button class="myButton">button 3</button>
  <button class="myButton">button 4</button>
</div>

您的 Javascript：

var mouse_is_down = false;
var current_i = 0;    
var buttoncounter = 1;
var button = "";
var buttoncount = 0;

function changebutton() {
  var x = document.getElementById("myDIV").querySelectorAll(".myButton");
  x[buttoncount].style.backgroundColor = "red";
  button = x[buttoncount];
  button.onmousedown = function(){
  mouse_is_down = true;

  setTimeout(
    (function(index){
      return function(){
        if(mouse_is_down && current_i === index){
          //do thing when hold
          console.log("hold" + buttoncounter);
          console.log(button);

        }
      };
    })(++current_i), 500); // time you want to hold before fire action
  };

  button.onmouseup = function(){
    mouse_is_down = false;
    current_i++;
    buttoncounter++;
    changebutton();
  };
  buttoncount++;
}

changebutton();