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

Question

The following code should only be called when the users mouse cursor enters the div element .post-entry. 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() {

        console.log('enter');

    }, 

    mouseMove: function() {

        console.log('move');


    }

}

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 el to the event, so when the mouse position enters .post-entry it should do the linked function. What am I doing wrong?

`()` will invoke the function... Pass `app.uiController.mouseMove` as argument... — Rayon, Jul 26 '16 at 17:35
@Rayon Just passing it as an argument may have `this` problems. — gcampbell, Jul 26 '16 at 17:38
@gcampbell – OP never used `this` in the handler and passing and `this` context will not be lost by passing `function-name` — Rayon, Jul 26 '16 at 17:40

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

As Rayon pointed out instead of passing

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

the following must be passed

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

This passes the function without executing it.

Update

You can use this inside mouseEnter: for example

mouseEnter: function() {
    id = $( this ).attr("id");
    $("#result").text('enter that.id =' + id);

}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 26 '16 at 17:39

surfmuggle

5,527
7
48
77

Is there also a way to get the current element passed to the function mouseEnter and mouseMove? – Caspert Jul 26 '16 at 18:32

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

1 Answers1

Update