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 est sur l'élément supérieur, l'élément inférieur ne reçoit pas les événements mouseover.Est-il possible de désactiver certains éléments DOM lors de la capture d'événements de souris?
Y at-il un moyen de désactiver l'élément supérieur de recevoir des événements de la souris?
C'est le meilleur que je peux trouver. Vous pourriez probablement être assez complexe, mais (à ma connaissance), le plus grand z-index va toujours capturer l'événement. Vous POUVEZ, cependant, contourner ce problème, mais vous feriez probablement mieux de refactoriser 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 produisent. Vous pouvez également utiliser e.target pour vérifier ce que 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 seconde 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"> </span>
<span id="inside"> </span>
</p>
<div id="region"><div id="region3"></div></div>
<div id="region2"></div>
</body>
</html>
Brad , merci de votre volonté d'aider! Mais j'ai besoin que la logique soit à l'intérieur de $ ('# région'). comme: $ ('# region2'). mousemove (fonction (e) { $ ('# region'). trigger (e); }); – tester
Je vous recommande de créer votre propre fonction jQuery 'jQuery.fn.CustomMousemove = function (myTarget) {$ (this) .mousemove (fonction (e) {...}); ...} 'puis gérer vos propres actions en fonction de ce qui est sélectionné. Ensuite, vous pouvez avoir tout le code dans une zone concluante et appeler '$ ('# region, # region2'). CustomMousemove ('# region');' et toutes les activités affectent seulement #region. –
Eh bien, Brad, merci encore. Le vrai problème est de faire $ ('# region'). Mousemove être exécuté chaque fois que la souris se déplace sur son corps même si elle est derrière des milliers de divs absolument positionnés ... Je ne pense pas qu'il y ait un moyen de le faire, cependant Je ne connais peut-être pas la solution ... – tester
Les éléments peuvent être facilement désactivés de recevoir événements de souris en utilisant, dans votre exemple, le code CSS suivant:
#region2 {
pointer-events: none;
}
Pour plus d'informations, voir this SO post.
+ 1 merci beaucoup pour cette solution agréable et facile :) Il a résolu mon problème avec popup sur 'OpenLayers' que je montre sur' mouseover' un marqueur. – Boro
J'ai tout essayé dans la bibliothèque jQuery/css jusqu'à ce que je trouve cela. A travaillé un charme. –
Note: pas de support pour IE/Opera encore http://caniuse.com/pointer-events –
J'ai lu ceci plusieurs fois et je ne comprends toujours pas ce que vous demandez. Au lieu d'utiliser des termes vagues comme «élément initial», pouvez-vous simplement dire, en utilisant l'exemple que vous avez donné, ce que vous aimeriez que le comportement soit? Est-ce que vous avez l'intention d'éviter # region2 d'avoir des événements de souris, ou est-ce un contournement que vous avez trouvé? ** EDIT ** Je pense que je comprends maintenant, vous voulez que # region2 arrête d'interférer aveC# mouseover de la région, correct? (Désolé, café privation) –
Oui, Brad vous avez raison, merci de votre attention! – tester
Copie possible de [HTML/CSS: Rendre un div "invisible" aux clics?] (Https://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks) – vaxquis