javascript - jQuery Push and Hold 也带有 mouseleave

Question

我试图找出制作一些具有以下功能的按钮的最佳方法：

• 推（在这种情况下，mousedown 用于即时射击）并按住
• 如果你按下，然后拖动鼠标，同时按住，它应该消除“保持”状态
• mouseup 也是一样，只要光标仍在按钮内

我想我几乎在那里，但想知道 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');            

    }); 

});


})();​

谢谢。

Answer 1

我不确定我是否正确理解了您的问题 - 但如果您需要的只是鼠标移动时保持状态离开，那么您也可以做同样的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/