Caspert Caspert - 2 months ago 6x
Javascript Question

Why will mouseenter fire the function, while you don't hover over an element?

The following code should only be called when the users mouse cursor enters the div element

. By now, when I just refresh the page, I immediately receive the console.log enter and move.

app.uiController = {

init: function() {

// Development
console.log('init uiController');

var el = $('.entry .post-entry');
var dot = $('img');

// Call functions
$(el).on('mouseenter', app.uiController.mouseEnter());
$(el).on('mousemove', app.uiController.mouseMove());


mouseEnter: function() {



mouseMove: function() {




app.uiController object will be called by the page by default. As mentioned before, mouse enter and move works immediately after the script is loaded, but I assigned the variable
to the event, so when the mouse position enters .post-entry it should do the linked function.
What am I doing wrong?


As Rayon pointedout instead of passing

// Call functions
$(el).on('mouseenter', app.uiController.mouseEnter());

it following must be passed

// Call functions
$(el).on('mouseenter', app.uiController.mouseEnter);

This passes the function without executing it.