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

试试这个 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);
    });
}