如何为class为ball的div各边框绑定不同JavaScript点击事件？

嘿，这个需求其实挺常见的，但得先搞清楚一个关键：CSS边框并不是独立的DOM元素，所以你没法直接用JavaScript去“选中”它们。不过别担心，我们可以通过计算鼠标点击的坐标位置，来判断用户到底点到了哪条边框，进而触发对应的事件～

下面给你一个完整的实现方案，包含HTML、CSS和JavaScript代码：

1. 基础实现代码 #

HTML #

<div class="ball"></div>

CSS #

.ball {
  width: 200px;
  height: 200px;
  /* 给四边设置不同颜色，方便测试区分 */
  border-top: 10px solid red;
  border-right: 10px solid blue;
  border-bottom: 10px solid green;
  border-left: 10px solid yellow;
  margin: 50px auto;
  cursor: pointer;
}

JavaScript #

const ball = document.querySelector('.ball');

ball.addEventListener('click', function(e) {
  // 获取元素在视口中的位置和尺寸
  const rect = this.getBoundingClientRect();
  // 获取四个边实际计算后的边框宽度（转成整数）
  const borderWidths = {
    top: parseInt(getComputedStyle(this).borderTopWidth),
    right: parseInt(getComputedStyle(this).borderRightWidth),
    bottom: parseInt(getComputedStyle(this).borderBottomWidth),
    left: parseInt(getComputedStyle(this).borderLeftWidth)
  };
  
  // 获取鼠标点击的坐标
  const clickX = e.clientX;
  const clickY = e.clientY;
  
  // 判断点击区域
  if (clickY <= rect.top + borderWidths.top) {
    console.log('top');
  } else if (clickY >= rect.bottom - borderWidths.bottom) {
    console.log('bottom');
  } else if (clickX <= rect.left + borderWidths.left) {
    console.log('left');
  } else if (clickX >= rect.right - borderWidths.right) {
    console.log('right');
  } else {
    // 点击到了div内部，非边框区域
    console.log('inside');
  }
});

2. 代码解释 #

• getBoundingClientRect()：这个方法会返回元素在当前视口中的位置信息，包括top（元素顶部距离视口顶部的距离）、right（元素右侧距离视口左侧的距离）、bottom、left等关键数值，是我们判断位置的核心依据。
• getComputedStyle()：用来获取元素实际渲染后的CSS样式，避免直接写死边框宽度（比如如果边框用em或rem单位，这个方法能自动转成px值）。
• 坐标判断逻辑：通过对比鼠标点击的clientX/clientY和元素的边界位置，判断点击点落在哪个边框的范围内。

3. 优化：处理四个角的点击 #

上面的基础代码在点击四个角的时候，会优先触发上下边框的事件（因为判断顺序是先上下后左右）。如果你想区分四个角的点击，可以调整判断逻辑，单独处理这些区域：

ball.addEventListener('click', function(e) {
  const rect = this.getBoundingClientRect();
  const borderWidths = {
    top: parseInt(getComputedStyle(this).borderTopWidth),
    right: parseInt(getComputedStyle(this).borderRightWidth),
    bottom: parseInt(getComputedStyle(this).borderBottomWidth),
    left: parseInt(getComputedStyle(this).borderLeftWidth)
  };
  
  const clickX = e.clientX;
  const clickY = e.clientY;
  
  // 先判断四个角
  const isTop = clickY <= rect.top + borderWidths.top;
  const isBottom = clickY >= rect.bottom - borderWidths.bottom;
  const isLeft = clickX <= rect.left + borderWidths.left;
  const isRight = clickX >= rect.right - borderWidths.right;

  if (isTop && isLeft) {
    console.log('top-left corner');
  } else if (isTop && isRight) {
    console.log('top-right corner');
  } else if (isBottom && isLeft) {
    console.log('bottom-left corner');
  } else if (isBottom && isRight) {
    console.log('bottom-right corner');
  } 
  // 再判断四条边
  else if (isTop) {
    console.log('top');
  } else if (isBottom) {
    console.log('bottom');
  } else if (isLeft) {
    console.log('left');
  } else if (isRight) {
    console.log('right');
  } 
  // 最后是内部区域
  else {
    console.log('inside');
  }
});

这样就能精准区分每个区域的点击啦～

内容的提问来源于stack exchange，提问作者Emerson Lopes