javascript - 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

试试这个小提琴：

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);
    });
}

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

可能会创建一个带有 2 个参数的函数：值和操作。如此等等when button is pushed -> myfunction(x,"pushed") ...。