Tengo un elemento que está en la parte superior de otro elemento. Quiero capturar el evento mouseover con el elemento inferior, pero cuando el cursor del mouse está sobre el elemento superior, el elemento inferior no recibe los eventos mouseover.¿Hay alguna manera de desactivar algún elemento DOM para capturar eventos del mouse?
¿Hay alguna manera de desactivar el elemento superior de la recepción de eventos de ratón?
Esto es lo mejor que puedo llegar a. Probablemente puedas ser bastante elaborado, pero (que yo sepa) el mayor índice z siempre capturará el evento. PUEDES, sin embargo, evitarlo, pero probablemente sea mejor refacturar a otra función con un valor de compensación suministrado (o no) para que puedas tener en cuenta '#region' cuando se están produciendo los eventos. También puede utilizar e.target para comprobar lo que le está enviando el evento (ver http://api.jquery.com/category/events/ para más propiedades)
$('#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);
});
edición segunda solución:
<!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 , gracias por tu voluntad de ayudar! Pero necesito que la lógica esté dentro de $ ('# region'). Mousemove ... P. ej. . Como: $ ('# región2') mouseMove (function (e) {. $ ('# región) de disparo (e); }); – tester
Yo recomendaría hacer su propia función jQuery 'jQuery.fn.CustomMousemove = function (myTarget) {$ (this) .mousemove (function (e) {...}); ...} 'luego maneja tus propias acciones basadas en lo que se seleccionó. Luego puede tener todo el código en un área concluyente y llamar '$ ('# region, # region2'). CustomMousemove ('# region');' y todas las actividades afectan solo a #region. –
Bueno, Brad, gracias de nuevo. El problema real es hacer que $ ('# region'). Mousemove se ejecute siempre que el mouse se mueva sobre su cuerpo incluso si está detrás de miles de divs completamente posicionados ... No creo que haya ningún medio para hacerlo, sin embargo Puede que no sepa la solución ... – tester
elementos pueden desactivarse fácilmente a partir de la recepción de eventos del mouse usando, en su ejemplo, el siguiente CSS:
#region2 {
pointer-events: none;
}
Para más discusión, ver this SO post.
+1 muchas gracias por esta buena y sencilla solución :) Resolvió mi problema con la ventana emergente en 'OpenLayers' que muestro en' mouseover' un marcador. – Boro
Intenté todo en la biblioteca jQuery/css hasta que encontré esto. Trabajó un encanto. –
Nota: no hay soporte para IE/Opera todavía http://caniuse.com/pointer-events –
He leído esto varias veces y todavía no entiendo muy bien lo que estás preguntando. En lugar de usar términos vagos como "elemento inicial", ¿puede decir, utilizando el ejemplo que ha proporcionado, cuál es el comportamiento que le gustaría que fuera? ¿Es su intención evitar que # region2 tenga eventos de mouse, o es una derivación que se le ocurrió? ** EDITAR ** Creo que lo entiendo ahora, quieres que # region2 deje de interferir con el mouseover de # region, ¿correcto? (Lo siento, privación de café) –
Sí, Brad, tienes razón, gracias por tu atención! – tester
duplicado posible de [HTML/CSS: Hacer un div "invisible" para clics?] (Https://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks) – vaxquis