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
  }

});

缺点是它可能表现得稍慢（可能没有察觉）。

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

点击2次后停止jQuery功能

3 个答案: