ejemplo - obtener elementos de un div javascript
Impedir onmouseout al pasar el elemento secundario del elemento primario div sin WITH jQuery (17)
Aquí hay una solución más elegante basada en lo que viene a continuación. representa el evento que burbujea desde más de un nivel de niños. También tiene en cuenta los problemas entre navegadores.
function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
if (e.parentNode == this|| e == this) {
if(e.preventDefault) e.preventDefault();
return false;
}
e = e.parentNode;
}
//Do something u need here
}
document.getElementById(''parent'').addEventListener(''mouseout'',onMouseOut,true);
Estoy teniendo problemas con la función onmouseout en un div absoluto positoned. Cuando el mouse toca un elemento secundario en el div, el evento mouseout se desencadena, pero no quiero que se active hasta que el mouse esté fuera del elemento principal, div absoluto.
¿Cómo puedo evitar que el evento mouseout se mouseout cuando golpea un elemento secundario SIN jquery?
Sé que esto tiene algo que ver con el burbujeo del evento, pero no estoy teniendo suerte para descubrir cómo resolverlo.
Encontré una publicación similar aquí: ¿Cómo desactivar los eventos mouseout activados por elementos secundarios?
Sin embargo, esa solución usa jQuery.
Aunque la solución a la que hace referencia usa jquery, mouseenter y mouseleave son eventos dom nativos, por lo que puede usar sin jquery.
Compruebo el desplazamiento del elemento original para obtener las coordenadas de la página de los límites del elemento, luego me aseguro de que la acción del mouseout solo se active cuando el mouseout esté fuera de esos límites. Sucio pero funciona.
$(el).live(''mouseout'', function(event){
while(checkPosition(this, event)){
console.log("mouseovering including children")
}
console.log("moused out of the whole")
})
var checkPosition = function(el, event){
var position = $(el).offset()
var height = $(el).height()
var width = $(el).width()
if (event.pageY > position.top
|| event.pageY < (position.top + height)
|| event.pageX > position.left
|| event.pageX < (position.left + width)){
return true
}
}
Creo que Quirksmode tiene todas las respuestas que necesita (comportamiento de burbujeo de diferentes navegadores y mouseenter / mouseleave eventos), pero creo que la conclusión más común de ese evento burbujeante es el uso de un framework como JQuery o Mootools (que tiene el mouseenter y eventos mouseleave , que son exactamente lo que intuyó que sucedería).
Eche un vistazo a cómo lo hacen, si lo desea, hágalo usted mismo
o puede crear su versión personalizada de "media pobre" de Mootools con solo la parte del evento (y sus dependencias).
Encontré una solución muy simple,
solo use el evento onmouseleave = "myfunc ()" que el evento onmousout = "myfunc ()"
En mi código funcionó !!
Ejemplo:
<html>
<head>
<script type="text/javascript">
function myFunc(){
document.getElementById(''hide_div'').style.display = ''none'';
}
function ShowFunc(){
document.getElementById(''hide_div'').style.display = ''block'';
}
</script>
</head>
<body>
<div onmouseleave="myFunc()" style=''border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;''>
Hover mouse here
<div id=''child_div'' style=''border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;''>
CHILD <br/> It doesn''t fires if you hover mouse over this child_div
</div>
</div>
<div id="hide_div" >TEXT</div>
<a href=''#'' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>
Mismo ejemplo con la función de ratón:
<html>
<head>
<script type="text/javascript">
function myFunc(){
document.getElementById(''hide_div'').style.display = ''none'';
}
function ShowFunc(){
document.getElementById(''hide_div'').style.display = ''block'';
}
</script>
</head>
<body>
<div onmouseout="myFunc()" style=''border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;''>
Hover mouse here
<div id=''child_div'' style=''border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;''>
CHILD <br/> It fires if you hover mouse over this child_div
</div>
</div>
<div id="hide_div">TEXT</div>
<a href=''#'' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>
Espero eso ayude :)
Gracias a Amjad Masad que me inspiró.
Tengo la siguiente solución que parece funcionar en IE9, FF y Chrome y el código es bastante corto (sin el cierre complejo y las cosas transversales del niño):
DIV.onmouseout=function(e){
// check and loop relatedTarget.parentNode
// ignore event triggered mouse overing any child element or leaving itself
var obj=e.relatedTarget;
while(obj!=null){
if(obj==this){
return;
}
obj=obj.parentNode;
}
// now perform the actual action you want to do only when mouse is leaving the DIV
}
Hay dos formas de manejar esto.
1) Compruebe el resultado de event.target en su devolución de llamada para ver si coincide con su div principal
var g_ParentDiv;
function OnMouseOut(event) {
if (event.target != g_ParentDiv) {
return;
}
// handle mouse event here!
};
window.onload = function() {
g_ParentDiv = document.getElementById("parentdiv");
g_ParentDiv.onmouseout = OnMouseOut;
};
<div id="parentdiv">
<img src="childimage.jpg" id="childimg" />
</div>
2) O utilice la captura de eventos y llame a event.stopPropagation en la función de devolución de llamada
var g_ParentDiv;
function OnMouseOut(event) {
event.stopPropagation(); // don''t let the event recurse into children
// handle mouse event here!
};
window.onload = function() {
g_ParentDiv = document.getElementById("parentdiv");
g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};
<div id="parentdiv">
<img src="childimage.jpg" id="childimg" />
</div>
Lo hago funcionar como un encanto con esto:
function HideLayer(theEvent){
var MyDiv=document.getElementById(''MyDiv'');
if(MyDiv==(!theEvent?window.event:theEvent.target)){
MyDiv.style.display=''none'';
}
}
Ah, y la etiqueta MyDiv es así:
<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
<!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>
De esta forma, cuando onmouseout va para un niño, un nieto, etc., no se ejecuta style.display=''none'' ; pero cuando onmouseout sale de MyDiv se ejecuta.
Así que no es necesario detener la propagación, usar temporizadores, etc.
Gracias por ejemplos, podría hacer este código de ellos.
Espero que esto ayude a alguien.
También se puede mejorar así:
function HideLayer(theLayer,theEvent){
if(theLayer==(!theEvent?window.event:theEvent.target)){
theLayer.style.display=''none'';
}
}
Y luego las etiquetas DIV como esta:
<div onmouseout="JavaScript: HideLayer(this,event);">
<!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>
Entonces, más general, no solo para un div y no es necesario agregar id="..." en cada capa.
Pruebe mouseleave()
Ejemplo:
<div id="parent" mouseleave="function">
<div id="child">
</div>
</div>
;)
Si agregó (o tiene) una clase o ID de CSS al elemento principal, puede hacer algo como esto:
<div id="parent">
<div>
</div>
</div>
JavaScript:
document.getElementById("parent").onmouseout = function(e) {
e = e ? e : window.event //For IE
if(e.target.id == "parent") {
//Do your stuff
}
}
Entonces las cosas solo se ejecutan cuando el evento está en el div principal.
Si está utilizando jQuery, también puede usar la función "mouseleave", que trata de todo esto por usted.
$(''#thetargetdiv'').mouseenter(do_something);
$(''#thetargetdiv'').mouseleave(do_something_else);
do_ algo se disparará cuando el mouse entre thetargetdiv o cualquiera de sus elementos secundarios, do_something_else solo se activará cuando el mouse abandone thetargetdiv y cualquiera de sus elementos secundarios.
Si tiene acceso al elemento al que está unido el evento dentro del método mouseout , puede usar contains() para ver si event.relatedTarget es un elemento secundario o no.
Como event.relatedTarget es el elemento al que ha pasado el mouse, si no es un elemento secundario, has moused fuera del elemento.
div.onmouseout = function (event) {
if (!div.contains(event.relatedTarget)) {
// moused out of div
}
}
Solo quería compartir algo contigo.
Tuve un momento difícil con ng-mouseenter y ng-mouseleave .
El caso de estudio:
Creé un menú de navegación flotante que se activa cuando el cursor está sobre un ícono.
Este menú estaba en la parte superior de cada página.
- Para manejar show / hide en el menú, alternar una clase.
ng-class="{down: vm.isHover}" - Para alternar vm.isHover , utilizo los eventos del mouse ng.
ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"
Por ahora, todo estaba bien y funcionó como se esperaba.
La solución es limpia y simple.
El problema entrante:
En una vista específica, tengo una lista de elementos.
Agregué un panel de acciones cuando el cursor está sobre un elemento de la lista.
Usé el mismo código que el anterior para manejar el comportamiento.
El problema:
Me di cuenta de que cuando mi cursor está en el menú de navegación flotante y también en la parte superior de un elemento, hay un conflicto entre ellos.
Apareció el panel de acción y la navegación flotante fue oculta.
El problema es que incluso si el cursor está sobre el menú de navegación flotante, se activa el elemento de lista ng-mouseenter.
No tiene sentido para mí, porque esperaría un corte automático de los eventos de propagación del mouse.
Debo decir que me decepcionó y dedico un tiempo a descubrir ese problema.
Primeros pensamientos:
Intenté usar estos:
-
$event.stopPropagation() -
$event.stopImmediatePropagation()
Combiné muchos eventos de puntero ng (mousemove, mouveover, ...) pero ninguno me ayudó.
Solución CSS:
Encontré la solución con una propiedad css simple que uso cada vez más:
pointer-events: none;
Básicamente, lo uso así (en mi lista de elementos):
ng-style="{''pointer-events'': vm.isHover ? ''none'' : ''''}"
Con este truco, los eventos ng-mouse ya no se activarán y mi menú de navegación flotante ya no se cerrará solo cuando el cursor esté sobre él y sobre un elemento de la lista.
Para llegar más lejos:
Como puede esperar, esta solución funciona, pero no me gusta.
No controlamos nuestros eventos y es malo.
Además, debe tener acceso al alcance de vm.isHover para lograr eso y puede que no sea posible o posible, pero sucio de alguna manera u otra.
Podría hacer un violín si alguien quiere mirar.
Sin embargo, no tengo otra solución ...
Es una larga historia y no puedo darte una papa así que por favor, perdóname mi amigo.
De todos modos, pointer-events: none es vida, así que recuérdalo.
Use onmouseleave .
O bien, en jQuery, use mouseleave()
Es exactamente lo que estás buscando. Ejemplo:
<div class="outer" onmouseleave="yourFunction()">
<div class="inner">
</div>
</div>
o, en jQuery:
$(".outer").mouseleave(function(){
//your code here
});
un ejemplo está here .
Para una solución de CSS simple más simple que funciona en algunos casos ( IE11 o más reciente ), uno podría eliminar los pointer-events de pointer-events los niños al establecerlos en none
.parent * {
pointer-events: none;
}
function onMouseOut(event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
alert(''MouseOut'');
// handle mouse event here!
}
document.getElementById(''parent'').addEventListener(''mouseout'',onMouseOut,true);
Hice una demostración rápida de JsFiddle, con todo el CSS y HTML necesarios, compruébalo ...
EDITAR enlace fijo para compatibilidad con http://jsfiddle.net/RH3tA/9/ navegadores http://jsfiddle.net/RH3tA/9/
TEN EN CUENTA que esto solo verifica al padre inmediato, si el padre div tenía hijos anidados, entonces tienes que atravesar de alguna manera a través de los elementos a los padres que buscan el "elemento original"
Ejemplo EDIT para niños anidados
EDITAR Reparado para ojala navegador cruzado
function makeMouseOutFn(elem){
var list = traverseChildren(elem);
return function onMouseOut(event) {
var e = event.toElement || event.relatedTarget;
if (!!~list.indexOf(e)) {
return;
}
alert(''MouseOut'');
// handle mouse event here!
};
}
//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener(''mouseout'',makeMouseOutFn(parent),true);
//quick and dirty DFS children traversal,
function traverseChildren(elem){
var children = [];
var q = [];
q.push(elem);
while (q.length > 0) {
var elem = q.pop();
children.push(elem);
pushAll(elem.children);
}
function pushAll(elemArray){
for(var i=0; i < elemArray.length; i++) {
q.push(elemArray[i]);
}
}
return children;
}
Y un nuevo JSFiddle , EDIT actualizado
var elem = $(''#some-id'');
elem.mouseover(function () {
// Some code here
}).mouseout(function (event) {
var e = event.toElement || event.relatedTarget;
if (elem.has(e).length > 0) return;
// Some code here
});