0

看： //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 回答