JavaScript: Capturer le clic droit et désactiver le menu seulement dans certains éléments

Question

J'ai codé un script jquery où il y a une petite grille à l'écran et en utilisant le glisser-déposer, les utilisateurs peuvent placer des carreaux sur la grille (s'enclenche). Actuellement, si vous passez la souris sur une tuile, elle se fane dans l'option de rotation, mais je préférerais de beaucoup que vous puissiez faire un clic droit pour la faire pivoter (ce qui la rend plus naturelle). Je comprends que bloquer complètement le clic droit est souvent désapprouvé, alors je me demandais si c'était possible juste au sein d'un élément particulier, puis capturer cet événement, faire quelque chose dans JS et désactiver le menu contextuel? - Cela fonctionne dans tous les navigateurs. Sur une note de côté, actuellement j'utilise jQuery pour les effets et le javascript personnalisé pour le glisser-déposer, cela vaut-il la peine de regarder un plugin jQuery pour glisser-déposer?

Un grand merci,

Answer 1

Pour capturer le clic droit, vous pouvez utiliser cette jquery:

$('#gridID').bind('contextmenu', function(e) { 
    // do stuff here instead of normal context menu 
    return false; 
}); 

Cela fonctionne en chrome, firefox et safari. N'a pas testé IE . Fonctionne dans IE aussi. Seul bémol est que cela ne fonctionne pas dans Opera apparemment. Donc, si vous pouvez vivre avec cela ...

Answer 2

Je ne suis pas fan d'utiliser le bouton droit de la souris sur les pages Web. Cependant, si vous voulez vraiment le faire, vous pouvez intercepter le bouton droit de la souris comme décrit here. Vous pouvez bloquer le bouton droit de la souris (en d'autres termes renvoyer false dans votre gestionnaire d'événements) conditionnellement si la souris est sur vos cellules de la grille.

En ce qui concerne votre question supplémentaire: jquery ui has drag & drop functionality. C'est probablement plus facile à utiliser que de rouler le vôtre.

Answer 3

"vaut-il la peine de regarder un plugin jQuery pour glisser-déposer?"

Seulement si vous n'avez pas l'intention de votre application à utiliser sur l'iPhone OS avec Safari, par exemple, y compris iPad, voir Safari Web Content Guide: Handling Events