[英]Press and hold button and change query selector
基於問題,按住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會更改其他按鈕的顏色值。 怎么了?
首先,請勿多次使用相同的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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.