arrêter la souris lorsque vous cliquez sur un object

Si je veux mapper de la souris sur un div, un élément apparaîtra, puis lorsque mouseleave, l’élément disparaît.

J’ai une fonction de clic à l’intérieur du mouseenter, il y a donc un menu déroulant lorsque vous cliquez dessus.

Je souhaite que le menu déroulant et l’élément restnt actifs même lorsque les feuilles de souris sont laissées. Je souhaite donc que la souris ne soit pas applicable dans cette situation, lorsqu’il y a un événement de clic. L’utilisateur devra cliquer sur l’élément à nouveau ou n’importe où sur la page pour faire disparaître l’élément et le menu déroulant.

Mais je veux que la fonction Mouseleave fonctionne de sorte que, si l’utilisateur glisse une div, l’élément s’affichera et pourra cliquer dessus à nouveau.

J’ai actuellement quelque chose comme ça, mais je ne sais tout simplement pas comment faire en sorte que la souris ne soit plus applicable lorsque vous cliquez dessus

$(".div").mouseenter(function(){ $(".element",this).show(); $(".element").click(function(){ $(".dropdown").show(); return false; }); }).mouseleave(function(){ $(".element",this).hide(); });

MODIFIER:

HTML

   boxed element 
  menu

Vous pouvez définir un atsortingbut personnalisé pour marquer l’élément comme ayant été cliqué. Le gestionnaire d’événements mouseleave peut vérifier la valeur de cet atsortingbut personnalisé avant de masquer l’élément.

C’est à dire quelque chose comme:

 $(".div").mouseenter(function(){ $(".element",this).show(); $(".element").click(function(){ $(".dropdown").show(); // set custom atsortingbute for marking this one as clicked $(this).attr('clicked', 'yes'); return false; }); }).mouseleave(function(){ // check custom atsortingbute before hiding the element if($(this).attr('clicked') != 'yes') { $(".element",this).hide(); } });

Cela a fait le tour pour moi

 $("#id").click(function(){ $("#id").off("mouseleave"); });

Vous pouvez utiliser les nouvelles méthodes d’activation / désactivation de jQuery si vous utilisez 1.7+

Quelque chose comme:

 $(".div").on('mouseenter', function(){ showElm(); $(".element").click(function(){ $(".div").off('mouseleave', hideElm); $(".dropdown").show(); return false; }); }); $(".div").on('mouseleave', hideElm); $(document).on('click', hideElm); function hideElm() { $(".element, .dropdown").hide(); } function showElm() { $(".element").show(); }

Fiddle: http://jsfiddle.net/fSjtm/

Vous aurez probablement besoin de tweking, mais cela vous donnera une idée générale.

utilisez event.stopPropagation ();

c’est mieux parce que vous pouvez utiliser des liens sur l’élément

 $(".div").on('mouseenter', function(){ showElm(); $(".element").click(function(event){ $(".div").off('mouseleave', hideElm); $(".dropdown").show(); event.stopPropagation(); }); }); $(".div").on('mouseleave', hideElm); $(document).on('click', hideElm); function hideElm(event) { $(".element, .dropdown").hide(); } function showElm(event) { $(".element").show(); }

 .element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; } .dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

  HERE  boxed element 
  menu

Il semble que l’événement mouseleave auquel vous faites référence soit déclenché par le clic de la souris et non par un événement mouseEvent d’origine. Essaye ça:

 $(".div").on('mouseenter', function(){ $(".element").on('click', function(){ ... }); }); $(".div").on('mouseleave', function(event){ if(typeof(e.originalEvent) != 'undefined'){ // only when mouseleave is the original event. } });