Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jhonei

[Resolvido] Propagação de Eventos

Por , em Javascript

Recommended Posts

Jhonei    0

Jhonei
Postado

Como faço para evitar a propagação do evento pai para o filho??

 

Gostaria que o script efetuasse uma ação ao passar o mouse sobre o elemento pai e outra ao passar o mouse sobre o elemento filho!!! E não as duas ao passar o mouse sobre o elemento filho...

 

O que falta para este exemplo funcionar de forma correta??

<html>
<head>
<style type="text/css">
<!--
#pai {
position:absolute;
left:70px;
top:29px;
width:261px;
height:220px;
background-color:#000;
z-index:1;
}
#filho {
position:absolute;
left:51px;
top:55px;
width:156px;
height:110px;
background-color:#00FF00;
z-index:1;
}
-->
</style>


<script type="text/javascript">
window.onload = function() {

document.getElementById('pai').onmousemove = function() {alert('Pai')};
document.getElementById('filho').onmousemove = function() {alert('Filho')};

};
</script>


</head>

<body>
<div id="pai">
 <div id="filho"></div>
</div>
</body>
</html>

 

acredito que usando uma destas ferramentas seria uma opção, até tentei, mais não obtive sucesso!!

 

stopPropagation;

cancelBubble;

Nó.

 

 

Grato desde já!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Tente assim:

document.getElementById('pai').onmousemove = function(e) {
e = e || window.event;
   if(e.target == this) {
       alert('pai')
   }
};

 

Comportamento esperado: só irá disparar o alert se você mexer o mouse sobre o elemento pai, mas não se o fizer sobre o filho.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
	document.getElementById('filho').onmousemove = function( e )
{
	var e = e || window.event;
	e.stopPropagation();
	alert('Filho')
};

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito