javascript - 一個按鈕的三個功能

Question

首先，我想說，我是一個JavaScript界的新手。

我想寫一個功能按鈕：

when button is pushed -> x=0 ; post(x); display x; 
when button is released -> x=1; post(x); display x; 
when button is hold down -> while hold: 
      if(x=0){post(x); display x; x++}   
      if(x=1){post(x); display x; x--} 

這就是我想出迄今：

http://pastebin.com/1myT891h

幫助將是非常讚賞。

Answer 1

也許用2個參數創建一個函數：value和action。 等when button is pushed -> myfunction(x,"pushed") ...等。

Answer 2

檢查以下jsFiddle。它做你正在尋找的東西（至少，我希望它）。讓我知道如果不清楚，我會看看我是否可以清除它。

http://jsfiddle.net/s9nUr/

下面是從小提琴的代碼，如果你不希望看到它在行動。請注意使用jQuery。

var x= 0; 
var interval; 

var push = function(val) { 

} 

var hold = function() { 
    if (x === 0) { 
     console.log('x is 0');  
    } 
    if (x === 1) { 
     console.log('x is 1');   
    } 
} 

$('#myButton').on('mousedown', function() { 
    x= 0; 
    push(x); 

    interval = setInterval(hold, 500); 
}); 

$('#myButton').on('mouseup', function() { 
    x = 1;   
    push(x); 

    clearInterval(interval); 
}); 

Answer 3

試試這個fiddle：

HTML：

<button id="button">Click here</button><br/> 
Status: <span id="status"></span> 

的Javascript：

observeTriState("#button", function(state) { 
    var states = { '0':'Push', '1':'Release', '2':'Hold Down' }; 

    $("#status").text(states[state]); 
}, 500); 

function observeTriState(selector, callback, holdDelay) { 
    var mouseDown = false; 
    var mouseIn = false; 
    var interval; 

    function checkStatus() { 
     if (mouseDown && mouseIn) { 
      callback(2) 
     } 
    } 

    $(selector).mousedown(function() { 
     callback(0); 
     mouseDown = true; 
     interval = setInterval(checkStatus, holdDelay); 
    }).mouseup(function() { 
     mouseDown = false; 
     callback(1); 
     clearInterval(interval); 
    }).mouseenter(function() { 
     mouseIn = true; 
    }).mouseleave(function() { 
     mouseIn = false; 
     mouseDown = false; 
     clearInterval(interval); 
     callback(1); 
    }); 
}