[Javascript] Impedir "click" (botão esquerdo) dentro de um <div>

XpiritO

Power Member
Boas. Alguém me pode ajudar com isto?

A intenção é impedir o "click" (acção sobre o botão esquerdo do rato) dentro de um elemento <div> da minha página.
Tenho um <div> com o id "div_player" onde tenho um elemento de vídeo embebido do Youtube. Contudo, quando o utilizador clica sobre o elemento embebido, é reenchaminhado para a página do vídeo no Youtube. É isso que pretendo impedir, ou seja, desligar completamente a acção sobre esse elemento embebido (que está inserido no <div>)

O código que tenho feito neste momento é o seguinte:

Código:
<script language="javascript">
//Disable Clicking inside Player DIV
	function avoidStreamClicking(){
		var el = document.getElementById("div_player");
		el.addEventListener("click", disableClick, false);
		el.addEventListener("mouseup", disableClick, false);
		el.addEventListener("mousedown", disableClick, false);
		//el.onmousedown = disableClick;
	}
	function disableClick(evt) {
		alert("Click no DIV");
		evt.stopPropagation();
		evt.preventDefault();
		return false;
	}
</script>

Sendo que esta função "avoidStreamClicking" está a ser invocada no evento "onload" do elemento <body> (e está funcional porque a mensagem do alert surge no ecrã quando clico), mas não está a cancelar a propagação do clique, ou seja, a impedir o "click" dentro do <div>.
 
Última edição:
Pq é que não desabilitas o botão do lado direito para a página inteira?

Podias fazer algo do genero:

Código:
<script language=JavaScript>

var message="Não funciona!";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

</script>
 
pois mas ele quer é o botão esquerdo:007:
ele quer impedir que ao clicar no video do youtube, seja encaminhado para o respectivo site.
mas será que isso é permitido?
 
pois mas ele quer é o botão esquerdo:007:
ele quer impedir que ao clicar no video do youtube, seja encaminhado para o respectivo site.
mas será que isso é permitido?

My bad. :P

Tens razão MPalhas, é o que faz ler as coisas rapidamente, lol.
Sim, assim tem que ser direccionado apenas ao <div>.
 
também não percebeste bem. ele não quer desactivar os botões de pausa, a barra de progresso, etc (pelo menos não é esse o objectivo)
o que ele quer é desactivar o código que faz com que ao clicar no video (ná area do video mesmo, e não num botão) seja redireccionado para a página correspondente do youtube.

não sei se isto dá para fazer nem se resulta, mas será possivel por uma div invisivel exactamente por cima da área do video?

mas como já disse mais atrás, será que isso é permitido? afinal vai-se estar a usar o player em flash e um vídeo do youtube e deixa de haver qualquer tipo de ligação (publicidade, se assim se pode dizer) para o site original, o youtube. não me parece que eles gostem muito disso.
 
também não percebeste bem. ele não quer desactivar os botões de pausa, a barra de progresso, etc (pelo menos não é esse o objectivo)
o que ele quer é desactivar o código que faz com que ao clicar no video (ná area do video mesmo, e não num botão) seja redireccionado para a página correspondente do youtube.

não sei se isto dá para fazer nem se resulta, mas será possivel por uma div invisivel exactamente por cima da área do video?

mas como já disse mais atrás, será que isso é permitido? afinal vai-se estar a usar o player em flash e um vídeo do youtube e deixa de haver qualquer tipo de ligação (publicidade, se assim se pode dizer) para o site original, o youtube. não me parece que eles gostem muito disso.

Tal como disse no "post" inicial, pretendo "desactivar" a acção de "clique" sobre o <div> onde está inserido o vídeo. Já testei a colocação de um <div> com z-ndex por cima do <div> do vídeo (que funcionaria como "layer" superior ao vídeo), mas mesmo assim o vídeo sobrepõe-se sempre ao outro "layer"... o que me custa a entender, mas é o que acontece.

Eu julgo que a melhor forma de conseguir fazer o que pretendo seria conseguir "capturar" as acções de "clique" sobre o <div> do vídeo e cancelar a acção respectiva, mas penso que não está a funcionar como pretendo porque a propagação dos eventos é feita de dentro para fora, e como o objecto do vídeo está dentro do <div>, não consigo "cancelar" a respectiva acção antes que esta seja despoletada pelo elemento interno ao <div> (a caixa do vídeo, no caso).
 
Faz como te disse... Um gif transparente e colocas por cima da div que tem o filme.



Nunca fiz mas aqui o meu colega da frente usou isso num trabalho e funcionou!
 
[PT]latrine;2968429 disse:
Faz como te disse... Um gif transparente e colocas por cima da div que tem o filme.
Nunca fiz mas aqui o meu colega da frente usou isso num trabalho e funcionou!
Já experimentei essa ideia da colocação de uma imagem transparente, não funcionou.

O Javascript que uso para colocar o conteúdo Flash, "SWFObject" (http://blog.deconcept.com/swfobject) possui uma propriedade wmode que, supostamente, permitiria fazer o que pretendo. Pelo que andei a ler em diversos blogs e fóruns na internet, bastaria-me colocar no "style" do <div> do vídeo o z-index desejado (no meu caso, o mais baixo, para que esse <div> ficasse "por baixo" do outro) e depois colocar a propriedade wmode do objecto flash com o valor "transparent".

A propriedade wmode tem 3 valores possíveis: "transparent", "opaque" ou "window" (para informação sobre cada uma delas, consultar http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=2)

O que se passa é que quando coloco essa propriedade com "transparent", o conteúdo flash não aparece. Apenas aparece quando coloco "window".

Código:
swf.addParam('wmode','transparent');
Não funciona. Só funciona quando coloco...
Código:
swf.addParam('wmode', 'window');

...e continuo com o mesmo problema, que é o vídeo ficar "por cima" do outro layer.
 
Última edição:
Ainda não consegui resolver este "problema"... alguém tem sugestões? :(

Pegando na ideia do [PT]latrine em colocar um gif transparente, vê se isto te ajuda em alguma coisa:


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Youtube VideoClick-Blocker</title>
  <link href="style.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
  <br />
  <div id="youtube_video">
  
    <div id="youtube_video_blocker">
      <img src="spacer.gif" id="youtube_img_blocker" alt="no_click_please" title="no_click_please" />
    </div>
    
    <div id="youtube_video_content">
      <script type="text/javascript">
        var so = new SWFObject("http://www.youtube.com/v/XKOwGffqlbM&hl=en", "mymovie", "425", "355", "7");
        so.addParam("wmode", "transparent");
        so.write("youtube_video_content");
      </script>
    </div>

  </div>
</body>
</html>

style.css
Código:
div#youtube_video{
  width: 425px;
  height: 355px;
}

div#youtube_video div#youtube_video_blocker{
  position: absolute;
  width: 425px;
  height: 318px;
}

div#youtube_video div#youtube_video_blocker img#youtube_img_blocker{
  width: 100%;
  height: 100%;
}


Usei o SWFObject v1.5.

Testei no IE6/7, FF2, Opera 9.27, Safari 3.1.1 (tudo para windows) e pareceu-me funcionar correctamente, porém se por ex. quiseres ajustar o volume não funciona porque a barra do volume vai expandir para cima e vai incidir na parte que se encontra desactiva :)

Tens aqui um pixel/spacer.gif :D
 
Última edição:
Back
Topo