单击 2 次后停止 jQuery 功能

Question

我正在开发一个函数来获取图像的选定点坐标并将其保存到变量中。 我需要的是选择两个点，然后执行其他功能。 下面的这段代码可以很好地获取点坐标，但是只对两点执行这个函数？ 谢谢你的建议。

$(".bg_image").click(function(e) {
                    var offset = $(this).offset();
                    var relativeX = (e.pageX - offset.left);
                    var relativeY = (e.pageY - offset.top);

                    $('<div>', {
                        'class':'point',
                        'css': {
                            'position': 'absolute',
                            'left':     relativeX +'px',
                            'top':      relativeY +'px',
                            'width':    '3px',
                            'height':   '3px',
                            'background-color': '#fff'
                        }
                    })
                    .appendTo('#output');
                    console.log("X: " + relativeX + "  Y: " + relativeY);

                });

Answer 1

您需要创建一个变量来计算用户对图像执行的点击次数。

var count = 0;

$(".bg_image").click(function(e) {
  count++;
  if ( count <= 2 )
  {
    //execute your code
  }
});

Answer 2

添加一个像这样的全局变量：

var clickCount = 0;

每次调用.click() ，递增计数器。 并检查值：

$(".bg_image").click(function(e) {
    clickCount++;
    if (clickCount > 2)
        return false;
    ...
});

Answer 3

获取点击次数是一个选项。 另一个考虑是使用数组并获取数组的长度。

var coordinates = [];


$(".bg_image").click(function(e) {

  coordinates.push([relativeX,relativeY]);

  // do some operation to make sure you didn't add the same coordinate twice

  if ( coordinates.length <= 2 )
  {
     // execute your code
  }

});

缺点是它的执行速度可能会慢一些（可能没有察觉）。

好处是您可以存储单击的位置，因此您可以将其用于代码的其他部分。 例如，进行分析或执行距离计算。