JS如何知道元素是否触摸边框

在开发移动端网页或应用时，我们经常会遇到需要判断用户是否触摸到了某个元素的边框的情况。这时可以使用JS来帮助我们实现这个功能。

方案一：使用getBoundingClientRect方法

可以使用元素的 getBoundingClientRect方法 来获取元素相对于视口的位置及大小信息。我们可以通过计算鼠标在视口内相对于元素边框的位置来判断是否触摸到了边框。

const ele = document.querySelector('#myElement'); // 需要判断的元素

ele.addEventListener('touchmove', function(e) {
  const touch = e.touches[0];
  const rect = ele.getBoundingClientRect(); // 获取元素相对于视口的位置及大小信息
  const x = touch.pageX - rect.left; // 计算鼠标在视口内相对于元素边框的位置
  const y = touch.pageY - rect.top;
  const borderSize = 10; // 边框宽度
  const width = ele.clientWidth; // 元素宽度
  const height = ele.clientHeight; // 元素高度

  if (x < borderSize || x > width - borderSize || y < borderSize || y > height - borderSize) {
    // 触摸到了边框
    console.log('Touching border!');
  } else {
    console.log('Not touching border!');
  }
});

方案二：使用CSS的:active伪类

CSS中有一个 :active 伪类，可以在元素被触摸时触发。我们可以通过设置元素的边框颜色和样式来判断是否触摸到了边框。

#myElement {
  border: solid red 10px; /* 默认没有触摸到边框时的样式 */
}

#myElement:active {
  border-color: green; /* 触摸到边框时的样式 */
}

然后在JS中判断元素是否被激活即可：

const ele = document.querySelector('#myElement'); // 需要判断的元素

ele.addEventListener('touchstart', function(e) {
  if (ele.matches(':active')) {
    // 触摸到了边框
    console.log('Touching border!');
  } else {
    console.log('Not touching border!');
  }
});

需要注意的是，这种方法无法满足需要根据边框宽度来判断的需求，但可以使用CSS的 border-radius 来模拟实现。

以上两种方案均可以在移动端网页或应用中使用。