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

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个参数的函数：value和action。所以when button is pushed -> myfunction(x,"pushed") ...等等。

javascript - 一键三功能

3 个答案: