Question

相关代码：

 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不是最好的，但我通常可以做简单的悬停和点击事件，这只是让我难过。

当我点击图像的某个区域时，我想要做的最后是有不同的框淡入，那部分都很好（我已经评论过了），但问题是无论我把它放在哪里点击事件重复，不停止。

我尝试解除点击事件的绑定（虽然我不确定这与情况有关），并使用简单的警报而不是淡出无效。

任何帮助都非常感激。

Answer 1

问题是，当鼠标在页面上移动时，您正在向click元素注册无数个image事件。

解决方案是注册一个click事件处理程序，并使用closure跟踪鼠标，如下所示。

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();
            // }
        });
});

Answer 2

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();
           // }
       });
});

Answer 3

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();
            // }
        });
});

jQuery Click事件代码无限重复

3 个答案: