まず、次の Fiddle を設定して、jQuery のみを使用して達成したいことを示します。
次の 3 つのイベントがバインドされます。
$('.test li p').mouseenter(function() {
var el = $(this),
count = ++mouseenters[el.attr('id')];
el.find('.mouseenters .count').text(count);
});
$('.test li p').mouseover(function() {
var el = $(this),
count = ++mouseovers[el.attr('id')];
el.find('.mouseovers .count').text(count);
});
$('.test li p').click(function() {
function r() {
return Math.floor(Math.random() * 256);
}
$(this).css({'background-color': 'rgb(' + r() + ',' + r() + ',' + r()});
});
使用しているブラウザー (私は Chrome を使用しています) によっては、jQuery がブラウザー ベンダーの mouseenter に対する実際のサポートの欠如を補っていることがわかります。Mouseover は、マウスが子要素に出入りするたびに発生しますが、mouseenter は、イベントがバインドされている DOM 要素 2 にマウスが入ったときにのみ発生します。
次に、Backbone/Marionette に次のように書きました。
イベントは、Marionette.ItemView で次のようにバインドされます。
events: {
'mouseover p' : 'handleMouseOver',
'mouseenter p' : 'handleMouseEnter',
'click p' : 'handleClick'
},
ここで、mouseenter イベントと mouseover イベントの両方の動作が悪く (または、少なくとも正常に動作する jQuery バージョンとは異なり)、クリックがまったく発生していないことがわかります。Backbone は jQuery イベントを使用しているという印象を受けましたが、どうやら私は間違っているようです。単に「Backbone は jQuery イベントを使用している」と言っているだけでは、内部で何が起こっているのかを完全には説明していません。
ここで何が起こっているのか、私は非常に混乱しています。Backbone バージョンでマウスが移動するたびに mouseenter/mouseover が起動するのはなぜですか? そして、なぜクリックがまったく発生しないのですか? 説明または回避策をいただければ幸いです。