Javascript Girl
  1. Javascript Girl
  3. Existe-t-il un moyen de désactiver certains éléments DOM de la capture d'événements de souris?
Intereting Posts
Existe-t-il une méthode jjuery unfocus? Comment décaler le texte visible dans un élément d'entrée étroit pour voir le curseur à la fin? Comment puis-je tester un créateur d'actions Redux qui ne diffuse que d'autres actions La directive AngularJs offre-t-elle des suggestions pour les courriels mal orthographiés? JQuery "$ .when (). Done ()" pour AngularJS Obtenir un clavier de recherche sur iPhone en utilisant PhoneGap Comment convertir un code HTML ou des données contenant (image tag et un certain texte) en image pour downlaod Mettre en place un message "This is taking too long" avec jQuery Erreur avec le décapitulateur de date / heure de Bootstrap 3 Comment obtenir la valeur de l'élément sélectionné dans datalist en javascript? ! Function () {} () vs (function () {}) () Comment faire un sommeil en javascript? Sanitizing CSS in Rails Jquery: comment déclencher un événement après une action de déclenchement? Ajouter, redimensionner, positionner, modifier le texte à l'intérieur d'un div en utilisant jquery

Existe-t-il un moyen de désactiver certains éléments DOM de la capture d'événements de souris?

J'ai un élément qui est au dessus d'un autre élément. Je veux capturer l'événement mouseover avec l'élément inférieur, mais lorsque le curseur de la souris dépasse l'élément supérieur, l'élément inférieur ne reçoit pas les événements de la mouseover .

Existe-t-il un moyen de désactiver l'élément supérieur de la réception des événements de souris?

Les éléments peuvent être facilement désactivés lors de la réception des événements de souris en utilisant, dans votre exemple, les CSS suivants: 

 #region2 { pointer-events: none; }

Pour plus d'informations, consultez cette publication SO .

C'est le meilleur que je peux proposer. Vous pourriez probablement être assez élaboré, mais (à ma connaissance), le plus grand z-index va toujours capturer l'événement. Vous pouvez, cependant, travailler à son sujet, mais vous êtes probablement mieux refactoré dans une autre fonction avec une valeur de décalage fournie (ou non fournie) afin que vous puissiez garder «#region» à l'esprit lorsque les événements se déroulent. Vous pouvez également utiliser e.target pour vérifier ce qui vous envoie l'événement (voir http://api.jquery.com/category/events/ pour plus de propriétés) 

 $('#region2').mousemove(function(e){ var regionPos = $('#region').position(); var region2Pos = $('#region').position(); var offset = { left: region2Pos.left - regionPos.left, top: region2Pos.top - regionPos.top }; var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + (e.clientX + offset.left) + ", " + (e.clientY + offset.top) + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });

Modifier la deuxième solution: 

 <!DOCTYPE html> <html> <head> <style> #region { width:220px; height:170px; margin;10px; margin-right:50px; background:yellow; border:2px groove; float:right; } #region2 { background-color: white; float:right; position: relative; right: -150px; top: 50px; width: 100px; height: 100px; border: 1px solid } #region3 { width:30px; height: 30px; background-color: brown; } p { margin:0; margin-left:10px; color:red; width:220px; height:120px; padding-top:70px; float:left; font-size:14px; } span { display:block; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script type="Text/javascript"> jQuery.extend({ MousemoveElement: function(needle,onActivation){ var elList = needle; $('*').mousemove(function(e){ $('#outside').html('<b>Outside:<b/><br />target: '+e.target.tagName+' ['+e.target.id+']<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY); $('#inside').html(''); if (onActivation==null) return;// only search if we need to $(needle).each(function(){ $('#meta').html('outside'); var pt = { x: e.pageX, y: e.pageY }; var ext = { left: $(this).offset().left, right: ($(this).offset().left + $(this).innerWidth()), top: $(this).offset().top, bottom: ($(this).offset().top + $(this).innerHeight()) }; $('#meta').html('<b>PT:</b> '+pt.x+','+pt.y+'<br /><b>EXT:</b> ('+ext.left+','+ext.top+';'+ext.right+','+ext.bottom+')'); if ((pt.x >= ext.left) && (pt.x <= ext.right) && (pt.y >= ext.top) && (pt.y <= ext.bottom)){ $('#meta').html('GOOD'); onActivation(e,$(this)); } }); }); } }); $(document).ready(function(){ $.MousemoveElement('#region',function(e,element){ $('#inside').html('<b>Inside:<b/><br />target: '+element.attr('id')+'<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY); $('#outside').html(''); }); }); </script> </head> <body> <p> Try scrolling too. <span id="meta">Move the mouse over the div.</span> <span id="outside">&nbsp;</span> <span id="inside">&nbsp;</span> </p> <div id="region"><div id="region3"></div></div> <div id="region2"></div> </body> </html>