‘esto’ no funciona correctamente en otro evento. No tengo ni idea de por qué

Cuento corto, no sé por qué no funciona, he intentado Console.Log () para descubrir qué es ‘esto‘ y el evento sigue pasando ventana. Es un evento de clic que se supone debe activar los efectos en una cierta figura en este carrusel, por lo que no puedo buscar individualmente la clase (al menos que yo sepa). ¿Alguna solución de los más inteligentes?

var carFigure = null; //----------The Events $('.figure').click(toggleCarousel(this)); //$('.figure').mouseover(stopCarousel(this)); //$('.figure').mouseleave(startCarousel(carFigure)); //------------Switcharoo function function toggleCarousel(event) { var bool = false; console.log(event) if (bool) { stopCarousel(event); bool = false; } else { startCarousel(event); bool = true; } } //----------The action functions function stopCarousel(e) { if (carFigure != null) { document.getElementById('carousel').style.animationPlayState = "paused"; var p = e.parentElement; var a = p.getElementsByTagName('DIV')[2]; if (a.getElementsByTagName('IMG')[0].style.transform = "none") { a.getElementsByTagName('IMG')[0].style.transform = "scale(1.2, 1.2) translateY(-25%)"; a.getElementsByTagName('IMG')[0].style.borderRadius = "100%"; a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 0)"; this.getElementsByClassName('links')[0].style.transform = "translateY(-250%)"; this.getElementsByClassName('links')[0].style.opacity = "1"; carFigure = null; } } }; function startCarousel(e) { if (e != null) { carFigure = e; document.getElementById('carousel').style.animationPlayState = "running"; var p = e.parentElement; var a = p.getElementsByTagName('DIV')[2]; a.getElementsByTagName('IMG')[0].style.transform = "none"; a.getElementsByTagName('IMG')[0].style.borderRadius = "0"; a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 1)"; this.getElementsByClassName('links')[0].style.transform = "none"; this.getElementsByClassName('links')[0].style.opacity = "0"; } }; 
 --HTML Version (Snippet) 

No está adjuntando el controlador de eventos correctamente. Esta línea:

 $('.figure').click(toggleCarousel(this)); 

… está llamando a toggleCarousel con this inmediatamente (eso es lo que harán los parientes). Lo que realmente quieres es pasar el objeto de función a .click() :

 $('.figure').click(toggleCarousel); 

Actualización :

Como señaló @FelixKling, también querrás pasar el objective del evento a las funciones posteriores; parece que esperan un elemento , no el evento . Además, bool se restablecerá en false cada llamada, que no es lo que quieres; deberías ponerlo en el cierre:

 var flag = false; // "bool" is a reserved word, changed the name function toggleCarousel(event) { var element = event.target; if (flag) { stopCarousel(element); } else { startCarousel(element); } flag = !flag; } 

El .click() evento .click() no se vincula a una función a la que se llama cuando se hace clic en .figure . Está haciendo una llamada directa para toggleCarousel con el uso de this objeto en el momento ( window ). .click() proporcionar una función de callback para .click() .

Cambiar: $('.figure').click(toggleCarousel(this)); a:

 $('.figure').click(function(){ toggleCarousel(this); }); 

Para que toggleCarousel se invoque utilizando el objeto correcto en el momento del clic. Como su código es ahora, no se ajusta a la firma de JQuery para .click() e intenta invocar toggleCarousel inmediatamente utilizando el objeto que está en control en el momento en que se encuentra el código, que es la window .


El enlace de this objeto es volátil en JavaScript … es decir, no siempre apunta al mismo objeto y su enlace puede cambiar de una línea de código a la siguiente. Cómo invocar el código que contiene la palabra, this determina a qué objeto se vinculará.

Aquí hay una lista de verificación que puede seguir para saber a qué se vinculará esto …

Si se invoca el código que contiene this :

  1. Como método o propiedad de una instancia de objeto (a través de una variable de instancia):

     var o = new Object(); // "this" will be bound to the "o" object instance // while "someProperty" and "someMethod" code executes o.someProperty = someValue; o.someMethod(); 
  2. A través de una .call() , .apply() , .bind() o Array.prototype.fn :

     // "this" will be bound to the object suppled as the "thisObjectBinding" someFunction.call(thisObjectBinding, arg, arg); someFunction.apply(thisObjectBinding, [arg, arg]); var newFunc = someFunction.bind(thisObjectBinding, arg, arg); 

    Nota : Cuando se invoca una función de callback (es decir, controlador de eventos), hay una llamada implícita al controlador cuando se desencadena el evento. En estos casos, el objeto responsable de activar el evento se convierte en el objeto vinculado a this .

    Además, varios métodos Array.prototype permiten que se pase thisObject lo que alterará el enlace durante la llamada al método:

     Array.prototype.every( callbackfn [ , thisArg ] ) Array.prototype.some( callbackfn [ , thisArg ] ) Array.prototype.forEach( callbackfn [ , thisArg ] ) Array.prototype.map( callbackfn [ , thisArg ] ) Array.prototype.filter( callbackfn [ , thisArg ] ) 
  3. Si no se aplica ninguna de las otras situaciones, se produce el enlace predeterminado.

    3a. Con "use strict" en efecto: this undefined está undefined

    3b. Sin "use strict" en efecto: this une al objeto Global

NOTAS:

a) this unión también puede verse afectada por el uso de eval() , pero como buena práctica general, debe evitarse el uso de eval() .

b) Cuando los atributos HTML se utilizan para enlazar elementos DOM a manejadores de eventos (es decir, onclick , onload , etc.), se crean funciones de contenedor globales anónimas alrededor del valor de la propiedad de manejo de eventos, haciendo que el objeto Global ( window ) sea this objeto . Esta es una de varias razones para evitar los atributos de eventos HTML en línea.

Puede que esta no sea la mejor respuesta ni la más directa, pero espero que esto lo ayude a comprender lo que se ha perdido.

En javaScript, this objeto se establece durante una llamada a la función, en efecto. (aunque tome nota de la respuesta extendida aquí que detalla cómo se define / enlaza). Considera esto:

 function this_test () { console.log( this ); } this_test(); // prints nothing var x = {f:this_test}; // note, references to functions are not the same as function calls xf(); // prints {f:[function]} ie this==x inside the call this_test.call( x ); // identical in effect to above. 

Con eso en mente, considere esta línea que escribió:

 $('.figure').click(toggleCarousel(this)); 

Lo que hace esto es establecer una función de controlador de eventos que es el resultado de llamar a toggleCarousel(this) . ¡Porque esto es (supongo) código de nivel superior en un archivo js o en una etiqueta de script, en este contexto this === window porque no está dentro de una función!

Lo que deberías estar haciendo es esto:

 $('.figure').click( toggleCarousel ); 

Finalmente, dado que está utilizando jQuery, debe usar los métodos de jQuery para buscar y modificar el DOM, ya que es mucho más fácil (y compatible con varios navegadores). De ahí que este modismo a veces se vea en el código de evento de jQuery:

 function event_handler () { var $this = $(this); } 

Lectura altamente sugerida: jQuery Click Event : la mayoría de los otros manejadores de eventos funcionan de manera similar.