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

Question

基于问题，按住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();