1

まず、次の Fiddle を設定して、jQuery のみを使用して達成したいことを示します。

http://jsfiddle.net/NjmjP/1/

次の 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 に次のように書きました。

http://jsfiddle.net/PhXLf/

イベントは、Marionette.ItemView で次のようにバインドされます。

events: {
    'mouseover p' : 'handleMouseOver',
    'mouseenter p' : 'handleMouseEnter',
    'click p' : 'handleClick'
},

ここで、mouseenter イベントと mouseover イベントの両方の動作が悪く (または、少なくとも正常に動作する jQuery バージョンとは異なり)、クリックがまったく発生していないことがわかります。Backbone は jQuery イベントを使用しているという印象を受けましたが、どうやら私は間違っているようです。単に「Backbone は jQuery イベントを使用している」と言っているだけでは、内部で何が起こっているのかを完全には説明していません。

ここで何が起こっているのか、私は非常に混乱しています。Backbone バージョンでマウスが移動するたびに mouseenter/mouseover が起動するのはなぜですか? そして、なぜクリックがまったく発生しないのですか? 説明または回避策をいただければ幸いです。

4

1 に答える 1