jquery hover événement entre mousedown et mouseup - possible?

Question

Si vous imaginez dans Microsoft Paint vous pouvez cliquer et maintenir pour peindre dans une zone, id aiment faire un semblable mais en ajoutant une classe aux cellules dans un tableau:

(notez ceci n'est pas pour la peinture/art juste un facile façon de l'expliquer!)

le travail isnt suivant ...

$(function(){ 
    $('td').mousedown(function(){ 
    console.log('down'); 
     $('td').bind('hover', function(){ 
     $(this).addClass('booked'); 
     }); 
    }) 

    $('td').mouseup(function(){ 
     $('td').unbind('hover'); 
    }); 
}) 

Answer 1

il n'y a aucun cas "hover". Pourquoi ne pas simplement ajouter la classe dans le gestionnaire "mousedown" et l'enlever dans "mouseup"? Si vous souhaitez que la classe soit ajoutée seulement après un délai, définissez un délai d'expiration dans "mousedown" pour ajouter la classe, et annulez le délai dans "mouseup" (et supprimez également la classe).

$(function(){ 
    var timeout; 
    $('td') 
    .mousedown(function(){ 
     var $cell = $(this); 
     timeout = setTimeout(function() { 
     $cell.addClass('booked'); 
     }, 1000); 
    }) 
    .mouseup(function(){ 
     cancelTimeout(timeout); 
     $(this).removeClass('booked'); 
    }); 
}); 

Answer 2

Jetez un oeil à jQuery UI Selectable, qui fait quelque chose de semblable à ce que vous avez décrit. Jetez un oeil à la demo. exemple de mise en œuvre simple:

<script type="text/javascript"> 
$(function() { 
    $("#selectable").selectable(); 
}); 
</script> 

<ol id="selectable"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ol> 

Answer 3

résolu:

mouseenter() plutôt que hover() qui, comme Pointy souligné n'est pas explicitement une fonction