Backbone - View запускает событие mouseout, даже если оно находится внутри корня.

Question

С backbokne.js, наведением мыши и MouseOut событиями в целях не работает, как я ожидал:

Красной часть (корневой класс дела) является родителем внутренней ДИВ им информация -Box. При перемещении мыши от корня к информационному окну он запускает событие mouseout для корня, даже если информационный ящик является дочерним элементом root. Однако я хочу, чтобы остаться внутри корня, а мой курсор перемещается от

Вот мой очень простой HTML:

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

Вот мое мнение:

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

инициализирую мой взгляд как таковой :

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

Как я могу решить этот ребенок, запускающий «выключение» родительской проблемы?

Answer 1

Попробуйте mouseenter и mouseleave вместо mouseover и mouseout.

Answer 2

Изменить Ваши события, чтобы они делегируют в .info-box класса:

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

Answer 3

Я сомневаюсь, что это может быть возможным, чтобы избежать MouseOut события при переходе от родительских дел до внутри DIV, однако, он будет снова инициировать событие курсора, находящиеся ...

Сказать, что, когда вы объявляете события для вашего View, было бы желательно, чтобы указать селекторы ...

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

I сделал образец на jsFiddle как это ...

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