1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

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

Discussão em 'Web Development' iniciada por XpiritO, 18 de Maio de 2008. (Respostas: 13; Visualizações: 3291)

  1. XpiritO

    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: 18 de Maio de 2008
  2. Mavors

    Mavors Power Member

    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>
    
     
  3. MPalhas

    MPalhas Power Member

    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?
     
  4. Mavors

    Mavors Power Member

    My bad. :P

    Tens razão MPalhas, é o que faz ler as coisas rapidamente, lol.
    Sim, assim tem que ser direccionado apenas ao <div>.
     
  5. JPCarvalhinho

    JPCarvalhinho Colaborador
    Staff Member

    mmm.queres algo martelado? Faz uma imagem que cubra os comandos do youtubi e mete por cima numa nova div.
     
  6. MPalhas

    MPalhas Power Member

    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.
     
  7. XpiritO

    XpiritO Power Member

    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).
     
  8. JPCarvalhinho

    JPCarvalhinho Colaborador
    Staff Member

    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!
     
  9. hostmake

    hostmake Power Member

    Flash sobrepõe-se sempre aos DIV's, a menos o que o escondas.
     
  10. XpiritO

    XpiritO Power Member

    Mas se o esconder o vídeo não aparece... e não é isso que pretendo :(
     
  11. MPalhas

    MPalhas Power Member

    então e se em vez de sobrepor com uma div, sobrepor com um outro flash transparente?

    isto já começa é a ser um desenrascanço muito esquisito
     
  12. XpiritO

    XpiritO Power Member

    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: 19 de Maio de 2008
  13. XpiritO

    XpiritO Power Member

    Ainda não consegui resolver este "problema"... alguém tem sugestões? :(
     
  14. p3dro

    p3dro Power Member

    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: 25 de Maio de 2008

Partilhar esta Página