0 
jQuery('#test .track, :not(.btn)').mousemove(function(e){   
        var el = e.target;
        jQuery(el).mouseover(function (e) {
            e.stopPropagation();
            jQuery(this).addClass('highlight');
            jQuery(this).click(function(){
                jQuery('.active').removeClass('active');
                show_data(this); // a small function for showing this class, css
            })
        }).mouseout(function () {
            jQuery(this).removeClass('highlight');
        });

});

このコードを連続してクリックすると、Firefox がクラッシュします。このコードを使用して、マウスの下の現在の DOM 要素を強調表示しています。

4

3 に答える 3

2

ターゲット要素上を移動するマウスの「ティック」ごとに、新しいイベントハンドラーをアタッチしているようです。これにより、非常に急速に数百、数千のイベント ハンドラーが発生する可能性があります。これはVanilla JavaScriptでは悪いニュースです。jQueryではそれは核です。

click次に、マウスがターゲット要素の上に移動するたびに新しいイベント ハンドラーを追加し、別の Nuke を設定します。

次に、数回クリックします...そしてブーム！

于 2013-07-23T03:50:55.263 に答える
1

問題は、イベント登録モデルでした。マウスが要素の上に移動するたびに、指定された要素にハンドラーを登録するため、それぞれに何千ものイベントハンドラーが登録される可能性がありますmouseover。mouseoutこれにより、ブラウザーが js の実行を中断する可能性があります。

試す

jQuery('#test .track, :not(.btn)').mouseover(function (e) {
    e.stopPropagation();
    jQuery(this).addClass('highlight');
}).mouseout(function () {
    jQuery(this).removeClass('highlight');
}).click(function(){
    jQuery('.active').removeClass('active');
    show_data(this); // a small function for showing this class, css
});

デモ:フィドル

于 2013-07-23T04:00:48.647 に答える
0

マウス座標に基づいて要素を取得する場合。 

var element = $(selector)
function handler(e){     
   var x = event.clientX, y = event.clientY,
   var elementMouseIsOver = document.elementFromPoint(x, y);
   $(elementMouseIsOver).addClass('yourClass');
}
element.on('click', handler);
element.on('mouseover', handler);

ホバーに基づいて要素を取得する場合

var element = document.querySelectorAll(':hover');

ホバー時にスタイルを適用し、マウスアウト時にスタイルを削除したい場合

$(ele).hover(function(){
   // Hover Event
   $(this).addClass('xyz');
}, function(){
   // Hover done Event
   $(this).removeClass('xyz');
});
于 2013-07-23T04:11:24.327 に答える