0

参照: http://jsfiddle.net/hVLsk/2/

関連コード:

 jQuery(document).ready(function(){
       $(document).mousemove(function(e) {
           var element = $('#image');
           var mouseX = e.pageX - element.offset().left;
           var mouseY = e.pageY - element.offset().top;
           if(mouseX >= 0 && mouseY >= 0) {
               $('#coords').html(mouseX + ', ' + mouseY);
           }
           element.click(function() {
             //  if(mouseX >= 100 && mouseX <= 150 && mouseY >= 100 && mouseY <= 150) {
                   $('#div1').fadeToggle();
               // }
           });
       });
    });

私自身はサーバー側のプログラマーなので、私の JavaScript と jQuery は最高ではありませんが、通常は単純なホバーとクリックのイベントをうまく行うことができます。

私が最後にやりたいことは、画像の特定の領域をクリックすると異なるボックスがフェードインすることです.止まらずに。

クリックイベントのバインドを解除しようとしましたが（状況に関係があるかどうかはわかりませんが）、フェードアウトの代わりに単純なアラートを使用して無駄になりました。

どんな助けでも大歓迎です。

4

3 に答える 3

3

問題は、マウスがページ上を移動するときに要素に無限の数のclickイベントを登録していることです。image

解決策は、以下に示すように、単一のclickイベント ハンドラーを登録し、クロージャーを使用してマウスを追跡することです。

jQuery(document).ready(function() {
    var mouseX, mouseY, element = $('#image');
    $(document).mousemove(function(e) {
                mouseX = e.pageX - element.offset().left;
                mouseY = e.pageY - element.offset().top;
                if (mouseX >= 0 && mouseY >= 0) {
                    $('#coords').html(mouseX + ', ' + mouseY);
                }
            });
    element.click(function() {
        // if(mouseX >= 100 && mouseX <= 150 && mouseY >=
        // 100 && mouseY <= 150) {
        $('#div1').fadeToggle();
            // }
        });
});
于 2013-04-24T11:48:32.927 に答える
1 
jQuery(document).ready(function(){
var element = $('#image');
var mouseX
var mouseY
   $(document).mousemove(function(e) {
       mouseX = e.pageX - element.offset().left;
       mouseY = e.pageY - element.offset().top;
       if(mouseX >= 0 && mouseY >= 0) {
           $('#coords').html(mouseX + ', ' + mouseY);
       }
   });
    element.click(function() {
         //  if(mouseX >= 100 && mouseX <= 150 && mouseY >= 100 && mouseY <= 150) {
               $('#div1').fadeToggle();
           // }
       });
});
于 2013-04-24T12:17:45.797 に答える
0 
jQuery(document).ready(function() {
    var element = $('#image');
    $(document).mousemove(function(e) {  
                var mouseX = e.pageX - element.offset().left;
                var mouseY = e.pageY - element.offset().top;
                if (mouseX >= 0 && mouseY >= 0) {
                    $('#coords').html(mouseX + ', ' + mouseY);
                }
            });
           element.click(function() {
        // if(mouseX >= 100 && mouseX <= 150 && mouseY >=
        // 100 && mouseY <= 150) {
        $('#div1').fadeToggle();
            // }
        });
});
于 2013-04-24T11:53:08.277 に答える