如何获得最近的身份证？

Question

在iOS APP中，有一个webView包含许多文本行。到现在为止，我使用javascript来检测用户点击了哪些文本。但是由于线条高度和换行（空格）很大，有时文本没有被点击。

如果点击绿点位置，可以检测到文字1，点击蓝点和红点就不能显示2和4。

是否有可能获得最近的ID甚至点击空白？如果点击位置附近有两个文本，请获取最接近的文本。

感谢。

    <span id='1'>This is text</span> &nbsp;&nbsp;&nbsp;<span id='2'>This is text 2</span>
    <br>
    <p>
    <span id='3'>This is text 3</span>
    <br>
    <span id='4'>This is text 4</span>

Answer 1

您可能希望将文本放在另一个div标签内，该标签上有一些可以点击的填充。一个例子是this weave。可以通过简单地更改CSS中的.holder的填充来调整填充量。我希望这是你正在寻找的解决方案......

Answer 2

我对你的问题的数学问题感兴趣......我得到了一些工作。

原则是将所有元素的位置（x / y）作为目标 那是左上角...

你也必须关心高度和宽度才能进行正确的距离计算。

来自用户的点击（x / y）与最近元素的一角之间的实际距离将是最短的hypothenuse 。

这说...以下是片段中的内容：

console.clear();

var positions =[];
var idElements = $("[id]");

// Get position and dimension of all target elements.
for(i=0;i<idElements.length;i++){
  positions.push({
    x: idElements.eq(i).offset().left,
    y: idElements.eq(i).offset().top,
    h: idElements.eq(i).height(),
    w: idElements.eq(i).width()
  });
}
console.log(JSON.stringify(positions));

// On click... Find the nearest.
$(document).on("click",function(e){
  var x = e.pageX;
  var y = e.pageY;
  console.log("User clicked at "+x+"/"+y);

  // Reset results, if any...
  idElements.css({
    "background-color":"initial",
    "border":"initial"
  })

  // Find the closest element.
  var distances = [];
  for(i=0;i<positions.length;i++){

    // Evaluate distance on X axis
    if(x>positions[i].x){
      // Click occured on the right of the left position
      // So get the distance from right side...
      distanceX = x - (positions[i].x + positions[i].w);
    }else{
      // Click occured on the left of the left position
      distanceX = x - positions[i].x;
    }

    // Evaluate distance on Y axis
    if(y>positions[i].y){
      // Click occured below of the top position
      // So get the distance from bottom side...
      distanceY = y - (positions[i].y + positions[i].h);
    }else{
      // Click occured on the left of the left position
      distanceY = y - positions[i].y;
    }

    // Hypothenuse
    hyp = Math.sqrt( (distanceX*distanceX)+(distanceY*distanceY) );

    distances.push({
      dx: distanceX,
      dy: distanceY,
      hyp: hyp
    });
  }

  console.log(JSON.stringify(distances));

  // The real distance will ALWAY be the hypothenuse of the x/y distances calculated above.
  // Have to find the shortest.

  var shortestHyp=100000;
  var shortestHyp_index=0;
  for(i=0;i<distances.length;i++){

    //console.log(distances[i].hyp);

    if(distances[i].hyp < shortestHyp){
      //console.log("shorter");
      shortestHyp = distances[i].hyp;
      shortestHyp_index = i;
    }
  }
  console.log(shortestHyp_index);


  // Show result
  idElements.eq(shortestHyp_index).css({
    "background-color":"yellow",
    "border":"1px solid blue"
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id='1'>This is text</span> &nbsp;&nbsp;&nbsp;<span id='2'>This is text 2</span>
<br>
<p>
  <span id='3'>This is text 3</span>
  <br>
  <span id='4'>This is text 4</span>
</p>

同样在CodePen。