0

私は、次の機能を備えたいくつかのプッシュボタンを作成するための最良の方法を見つけようとしています。

  • 押して（この場合はマウスダウンで瞬時に発射）、押し続けます
  • 押し下げてからマウスをドラッグすると、押したままの状態で「ホールド」状態が解除されます。
  • カーソルがプッシュボタン内にある限り、マウスアップについても同じです。

私はほとんどそこにいると思いますが、JSウィザードに他のアイデア/最適化があるかどうか疑問に思っていました。

ライブデモはこちら

HTML

<ul>
    <li>
        <p>button0</p>
        <a class="button">push</a>
    </li>
    <li>
        <p>button1</p>
        <a class="button">push</a>
    </li>
    <li>
        <p>button2</p>
        <a class="button">push</a>
    </li>
</ul>​

JS

(function(){

$('ul').delegate('.button', 'mousedown', function(e) {

    e.preventDefault();

    var el = $(this),
        index = el.index('.button');

    console.log('button' +index + ' -> mousedown');

    el.text('hold').addClass('hold');

    $(el).on('mouseleave', function() {

        $(this).text('push').removeClass('hold').unbind('mouseleave mouseup');

        console.log('button' +index + ' -> mouseleave');                

    });

    $(el).on('mouseup', function() {

        $(this).text('push').removeClass('hold').unbind('mouseup mouseleave');

        console.log('button' +index + ' -> mouseup');            

    }); 

});


})();​

ありがとう。

4

1 に答える 1

0

問題を正しく理解したかどうかはわかりませんが、マウスを動かしたときにホールドmouseup状態が残っている場合は、次の場合と同じことを行うことができますmousemove。

$(el).on('mousemove', function() {
    $(this).text('push').removeClass('hold').unbind('mouseup mouseleave mousemove');

    console.log('button' +index + ' -> mousemove');            

});

mousemoveただし、すべてのイベントのバインドを解除することを忘れないでください。

PS：私はあなたのフィドルを編集しました：http：//jsfiddle.net/MathiasPaumgarten/r3tjs/1/

于 2012-12-20T01:18:14.147 に答える