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:

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?

Answer 1

Try mouseenter and mouseleave instead of mouseover and mouseout.