Get the "this" link for a custom event
I am trying to convert working JS code to jQuery code, but I am failing for several hours. There is a JsFiddle for:
http://jsfiddle.net/TyrionGraphiste/otx1hx7h/
The red element works (it uses JS code).
And there is JS code :
var hoverIntent = function (element, handler, minDuration, callback, duration) {
var timeout = null;
element.on( "mouseover", function () {
timeout = setTimeout(handler, minDuration);
} );
element.on( "mouseout", function () {
var clear = function () {
clearTimeout( timeout );
};
setTimeout( function () {
callback(), clear();
}, duration );
clear();
} );
};
/* Test */
var element = $( "#element" );
hoverIntent(element, function() {
$( element ).animate( {
height: "80px"}, 200 );
}, 1000, function () {
$( element ).animate( {height: "50px"}, 200 );
}, 1000 );
And here's the jQuery code :
/* jQuery Event */
$( "body > div.test" ).on( "hoverDuration", function ( e, options ) {
var
handler = options.handler,
minDuration = options.minDuration || 0,
callback = options.callback,
duration = options.duration || 0,
timeout = null,
clear;
console.log(options);
$( this ).on( {
mouseover: function () {
timeout = setTimeout(handler, minDuration);
},
mouseout: function () {
clear = function () {
clearTimeout( timeout );
};
setTimeout( function () {
callback(), clear();
}, duration );
clear();
}
} );
} );
$( "body > div.test" ).hoverDuration( {
handler: function() {
console.log( $(this) );
$( this ).animate( {
height: "80px"
}, 200 );
},
minDuration: 1000,
callback: function () {
$( this ).animate( {
height: "50px"
}, 200 );
},
duration: 1000
} );
In jQuery code on this line:
...
handler: function() {
console.log( $(this) ); // this one
$( this ).animate( { ...
I would like to get "this" relative to the HTML target, but for a moment, it registers the window, not the object.
I've tried in the documentation too: https://learn.jquery.com/events/introduction-to-custom-events/
But no way .. Can anyone help me?
source to share
The callback setTimeout
is called in the context of the global object. Instead, you need to provide the context for the element. One way is to use Function.prototype.bind
or in jQuery you can use a function $.proxy
:
mouseover: function () {
timeout = setTimeout($.proxy(handler, this), minDuration);
},
If you don't support IE8 then setTimeout(handler.bind(this), minDuration);
source to share