event.clientX; and event.clientY do not work in firefox

0

This function is perfect in chrome but does not work in firefox. the error is that in firefox it returns me in the console that "event is not defined" but in the chorme ta ok. Variables that are not in the function are global. (I do not use jquery and I do not want to use it)

Call OnMouseDown:

function move_janela_inicia(div_barra_id)
{                                      


    <!--pega o tamanho do body principal que esta na index--> 
    elemento_body = window.parent.document.getElementById('corpo_main');

    <!--pega o retangulo do body--> 
    boxDoElemento = elemento_body.getBoundingClientRect();

    <!--pega a camada que vai se mover efetivamente, a barra filha já veio no parãmetro e assim sei quem é a pai--> 
    elemento_move=document.getElementById(window.parent.document.getElementById(div_barra_id).parentNode.id); 

    maximo_top=elemento_body.offsetHeight-elemento_move.offsetHeight;
    maximo_left=elemento_body.offsetWidth-elemento_move.offsetWidth;


    mover=1;


    document.getElementById(div_barra_id).addEventListener("mouseout", function() {

     move_janela_mouse();

      }, false);

}

Calling in the function above

function move_janela_mouse()
{

   if (mover==1)
   {

           <!--pega o quanto rolou--> 
           var rolamentoX = elemento_body.scrollLeft;
           var rolamentoY = elemento_body.scrollTop;



           var xmouse=event.clientX;
           var ymouse=event.clientY;


           var px=((xmouse-boxDoElemento.left + rolamentoX)-(elemento_move.clientWidth/2));
           var py=ymouse-boxDoElemento.top + rolamentoY;


          <!--mantem a janela dentro dos limites-->                                           
          if (py<0) py=0;
          if (py>(maximo_top)) py=maximo_top-50;

          if (px<0) px=0;
          if (px>maximo_left) px=maximo_left;        


          elemento_move.style.left=px;
          elemento_move.style.top=py;

          mover=0;
  }



}       
    
asked by anonymous 08.06.2017 / 21:16

4 answers

2

Your code is almost there. Two small changes work out.

In the addEventListener part, reference the function you want to call instead of using an anonymous function and call the other function from there:

document.getElementById(div_barra_id).addEventListener("mouseout", move_janela_mouse, false);

This type of listener association will automatically pass an event object as the first argument of the function. So just change the first line of the function to:

function move_janela_mouse(event) {
    ...
    
08.06.2017 / 21:34
0

You can assign the values to the variable in this way

var xMouse = event.clientX || event.pageX;
var yMouse = event.clientY || event.pageY;

In short, if the first one does not run, it goes with the second value

    
09.06.2017 / 08:03
0

Here's a suggested improvement for your code. this way you create a scope for your variables and avoid unnecessary calls to the mouse event.

var MoverJanelaInicial = function (div_barra_id) {
    // iniciando variaveis que serão utilizadas no evento.
    this.elemento = document.getElementById(div_barra_id);
    this.elemento_body = window.parent.document.getElementById('corpo_main');
    this.boxDoElemento = this.elemento_body.getBoundingClientRect();
    this.elemento_move = document.getElementById(window.parent.document.getElementById(div_barra_id).parentNode.id); 
    this.maximo_top = this.elemento_body.offsetHeight - this.elemento_move.offsetHeight;
    this.maximo_left = this.elemento_body.offsetWidth - this.elemento_move.offsetWidth;

    // no lugar de temos uma variavel "mover" controlando à chamada do evento "mouseout".
    // que tal apenas remover a associação do evento após executa-lo?
    // para tal é preciso guardar uma referencia ao evento.
    // o ".bind(this)", serve para trocar trocar o objeto de contexto do evento, desta forma o this deixa de ser o elemento DOM e passa a ser à instancia de MoverJanelaInicial
    this.onMouseOut = this.moverJanelaMouse.bind(this);
    this.elemento.addEventListener("mouseout", this.onMouseOut);
}

MoverJanelaInicial.prototype.moverJanelaMouse = function (event) {
    var rolamentoX = this.elemento_body.scrollLeft;
    var rolamentoY = this.elemento_body.scrollTop;

    var xmouse = event.clientX;
    var ymouse = event.clientY;

    var px = ((xmouse - this.boxDoElemento.left + rolamentoX) - (this.elemento_move.clientWidth / 2));
    var py = ymouse - this.boxDoElemento.top + rolamentoY;


    if (py < 0) 
        py = 0;
    if (py > (maximo_top - 50)) 
        py = (maximo_top - 50);

    if (px < 0) 
        px = 0;
    if (px > maximo_left) 
        px = maximo_left;

    this.elemento_move.style.left = px;
    this.elemento_move.style.top = py;

    // removendo evento "mouseout"
    this.elemento.removeEventListener("mouseout", this.onMouseOut);
}

// instanciando o objeto
var moverJanela = new MoverJanelaInicial("meu_id");
    
09.06.2017 / 14:25
0

Thank you for the tips, without them you would not have been able to. Several of them could not be used because I wanted to create a function that could be called from anywhere in my project, just referring to it in ondragstart, without passing any id or worrying about other events. The way below works perfectly in firefox and chrome. If you do not want to do this, you can use the following code:

<!--variaveis globais que serão usadas em várias funções-->

 var elemento_move;
 var mover=0;
 var xinicial=0;
 var yinicial=0;



function move_janela_inicia(event)<!--chamar no ondragstart-->  
{

<!--pega a camada que vai se mover efetivamente, a barra filha já veio no parãmetro e assim sei quem é a pai--> 
    elemento_move=document.getElementById(window.parent.document.getElementById(event.target.getAttribute('id')).parentNode.id);                                       

<!--pega a posição x e y do mouse quando clicado-->     
     xinicial=event.clientX; 
     yinicial=event.clientY;


<!--passa um valor, no caso é como se passasse que valor é o id, mas podia ser um número por exemplo. Meio inútil neste exemplo mas sem esta linha não funciona no firefox-->  
     event.dataTransfer.setData("valor", event.target.getAttribute('id') );

<!--Para controlar e ele não ficar movendo sem que eu queira-->      
     mover=1;   

<!--Adiciona o evento oumouseout para que quando o usuário largue o botão chame a função-->      
     document.getElementById(event.target.getAttribute('id')).addEventListener("mouseout", move_janela_mouse, false);

}




<!--chamar no OnMouseout-->                   
function move_janela_mouse(event)
{



    if (mover==1)  <!--Se já iniciou a função move_janela_inicia e não largou o mouse...--> 
    {   


            boxDoElemento = elemento_move.getBoundingClientRect(); <!--pega a dimensão da div principa, que vai se mover--> 

            var px=xinicial-event.clientX; <!--pega aqui o quanto o usuário movimentou o mouse x e y--> 
            var py=yinicial-event.clientY;




            px=elemento_move.offsetLeft-px; <!--Desconta a largura e altura do componente--> 
            py=elemento_move.offsetTop-py;

            if (px<0) px=0; <!--as proximas 4 linhas servem para não permitir que a janela saia dos limites da página--> 
            if (py<0) py=0;

            if (px>window.screen.availWidth-elemento_move.offsetWidth) px=window.screen.availWidth-elemento_move.offsetWidth;
            if (py>(window.screen.availHeight-(elemento_move.offsetHeight*1.28))) py=window.screen.availHeight-(elemento_move.offsetHeight*1.28);  <!--por algum motivo tive que colocar 28% a mais, se puderem ajudar...--> 


            <!--agora move efetivamente a camada-->
            elemento_move.style.left=px;
            elemento_move.style.top=py;




             mover=0;  <!--para de mover as camadas-->
     }  

}       
    
14.06.2017 / 22:10