Ir para conteúdo

POWERED BY:

Arquivado

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

Solem

div sobre outro...

Por , em Javascript

Recommended Posts

Solem    0

Solem
Postado

tenho 2 divs uma em cima da outra...

 

a de baixo tem um evento onclick e a de cima tem uma figura que é um botão... como faço para ao clicar nesse botão não acionar o evento onclick da abaixo??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Solem    0

Solem
Postado

Pesquise sobre getElementById e as suas propriedades: value, style e display.

 

eu achar tudo bem, mais eu saber o que fazer com eles... outra historia...

 

o problema é... to mexendo em um script pro greasemonkey pra modificar um site, sou iniciante... o div com onclick, é do site, e o botão na figura é meu...

 

não sei no que mudar pra alterar o problema que disse... nem se tem como

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Tem como sim, e tudo se aprende com estudo.

 

Vamos lá:

 

Supomos que você tenha a seguinte estrutura:

 

<div id=exterior>
	<div id=interior>
 </div>
</div>
<input type='button' name=='botao' />

A primeira coisa seria definir um evento onclick para o botão:

 

<input type='button' name=='botao' onClick='abreDiv();' />

Então, em nosso javascript, definimos o que essa função abreDiv() vai executar>

 

<script type='text/javascript'>
	function onClick() {
 	var divInterior = document.getElementById('divInterior');
 	if(divInterior.style.display == 'none') {
 	divInterior.style.display = 'block';
 	} else {
 	divInterior.style.display = 'none';
 	}
	}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom, primeiro é bom entendermos o problema:

<html>
<head>
	<title>lala</title>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
window.onload = function()
{
	id('pai').onclick = function()
	{
		alert( 'Click na DIV #pai' );
	}
	id('del').onclick = function()
	{
		alert( 'Click na Imagem da Lixeira' );
	}
}
</script>
<style>
#pai {
	width: 100px;
	height: 100px;
	background: #f0f;
}
</style>
</head>
<body>
	<div id="pai">
		<img src="del.gif" alt="" id="del" />
	</div><!-- /pai -->     
</body>
</html>
é isso ne!?

clicando na lixeira, chama a função da #pai também.

 

Então, oque precisamos é saber onde realmente foi clicado..

window.onload = function()
{
	id('pai').onclick = function( e )
	{
		if( getTarget( e ).id==this.id )
			alert( 'Click na DIV #pai' );
	}
	id('del').onclick = function( e )
	{
		alert( 'Click na Imagem da Lixeira' );
	}
}
function getTarget( e )
{
	return (e.srcElement) ? e.srcElement : e.target;  
}
Imagem Postada

 

material:

http://javafree.uol.com.br/topic-875004-Como-identificar-um-objeto-clicado.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Solem    0

Solem
Postado

É exatamente isso William que está acontecendo... testei aqui e tudo está correto... só não sei como aplicar isso, porque é um script pra greasemonkey que estou tentando modificar, e logo me aventurei no javascript...

 

o window.onload não funciona sendo aplicado com o grease, pelo menos testando sozinho pra dar um alert na pagina não rodou, procurei mais não achei, que outras alternativas eu tenho de aplicar isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A grande sacada não é o window.onload

mas sim o target

Compartilhar este post

Link para o post
Compartilhar em outros sites

Solem    0

Solem
Postado

Não consegui usar, não sei porque mais não consegui...

 

Vou explicar melhor pra ver se você me da uma ideia de como fazer...

 

No site tem lá uma div com onclick certo... tem outra divs por cimase não me engano...

 

Atraves do greasemonkey por um script q estou modificando eu adicionei a figura em cima de tudo isso tbm em uma div, mais ao clicar ela chama essa div com o onclick, certo?

 

o que não sei é onde adicionar esa comparaçao do target... pensei em um eventlistener mais não consegui, nem sei se seria o caso, pois você coloca no onload, mais aqui não funciona...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Certo, vou simplificar o script:

<html>
<head>
        <title>lala</title>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function pai( e, el )
{
	if( getTarget( e ).id==el.id )
		alert( 'Click na DIV #pai' );
}
function filha( e )
{
	alert( 'Click na Imagem da Lixeira' );
}
function getTarget( e )
{
	return (e.srcElement) ? e.srcElement : e.target;  
}
</script>
<style>
#pai {
        width: 100px;
        height: 100px;
        background: #f0f;
}
</style>
</head>
<body>
        <div id="pai" onclick="pai( event, this )">
                <img src="del.gif" alt="" id="del" onclick="filha( event )" />
        </div><!-- /pai -->     
</body>
</html>
volto a repetir: o window.onload não tem nada a ver!

se concentra no target !!

 

A sugestão, talvez não seja possível...

-> Na função da DIV pai, checar se o clique foi para ela mesmo, e só se for, chamar oque precisar.

por isso, tem um IF:

if( getTarget( e ).id==el.id )
e todo o bloco de código da função da div pai, está subordinado à esse if, que significa:

 

SE, o id do alvo do clique, for o id do elemento atual, então, execute.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Solem    0

Solem
Postado

Usei isso que você fez...

 

Modifiquei o onclick do div pai pra esse, e coloquei as funções no head com meu script.

 

Mas o mais engraçado foi que agora mesmo o botao mesmo estando em outra div e não ter nem onclick nem link nela nem nada... ao clicar sobre a imagem aparece o alert do pai, e ao clicar sobre a div pai, não acontece nada.

 

 

EDIT: acho que achei o que está dando errado, as outras divs e a da imagem, estão dentro da div pai

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