Backbone - View is triggering mouseout event even tho it's inside the root.

Question

With the backbokne.js, mouseover and mouseout events of a view don't work as I'm expecting:

enter image description here

Red part (root class div) is the parent of the inner div named info-box. When moving the mouse from root to the info-box, it triggers a 'mouseout' event for the root even tho info-box is a child of root. However I want to stay inside the root while my the cursor moves from

Here is my very basic HTML:

<script type="text/template" id="box-template">
    <div class="root">
        <div class="info-box">
             Test title
        </div>
    </div>
</script>

Here is my view:

var DealViewClass = Backbone.View.extend({
    events: {
        'mouseover': 'boxMouseOver',
        'mouseout': 'boxMouseOut'
    }, 
    boxMouseOver: function(e){
        console.log('inside!');
    }
    },
    boxMouseOut: function(e){
        console.log('outside!')
    }
});

I initialize my view as such:

    var template = _.template($('#box-template').html());
    var dealView = new DealViewClass({
        model: model,
        el: template           
    });

How can I solve this child triggering 'mouseout of the parent issue?

score 12 · Accepted Answer · answered Jun 24 '13 at 19:23

12

Try mouseenter and mouseleave instead of mouseover and mouseout.

answered Jun 24 '13 at 19:23

freejosh

11,263
4
33
47

idbehold · Answer 2 · 2013-06-24T18:58:35.463

0

Change your events so they delegate to the .info-box class:

'mouseover .info-box': 'boxMouseOver',
'mouseout .info-box': 'boxMouseOut'

edited Jun 24 '13 at 18:58

answered Jun 24 '13 at 18:53

idbehold

16,833
5
47
74

Thanks for the attempt but this is not I want. I simply want both root and info-box being treaded as a same entity hence while moving in-between, they don't trigger mouse over and outs. – Hellnar Jun 24 '13 at 19:09

score 0 · Answer 3 · answered Jun 24 '13 at 19:15

I doubt it may be possible to avoid mouseout event when you move from parent div to inside div, however, it will again trigger mouseover event ...

Saying that, when you declare the events for your View, it would be advisable to to specify the selectors ...

...
events: {
        'mouseover .root': 'boxMouseOver',
        'mouseover .info-box': 'boxMouseOver',
        'mouseout .root': 'boxMouseOut'
    },
...

I did a sample on jsFiddle like this ...

http://jsfiddle.net/Tn8PX/3/

Backbone - View is triggering mouseout event even tho it's inside the root.

3 Answers3