javascript - 在具有不同边框的 div 上调用函数

Question

我有一个 div，它有一个名为“ball”的类，div 的每个边缘都有一个边框(border-top、border-left 等) 我想在用户单击每个边框上的边框。

例如:用户点击 border-top console.log('top') 等等

HTML:

.ball {
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin: auto;
  background-color: red;
  border-top: 20px solid green;
  border-left: 20px solid blue;
  border-bottom: 20px solid orange;
  border-right: 20px solid purple;
}

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

我知道我可以在用户单击 div 本身时触发事件，但我想以某种方式使用 Javascript 选择这些边框。

Answer 1

您可以通过添加额外的元素来模拟这一点。

这是一个例子(为了简单起见，我使用了 jQuery，但您可以轻松地更改为 JS)

$('span').click(function(){
  console.log($(this).data('value'));
})

.ball {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: blue;
  position: relative;
  font-size:0;
}

span:first-child {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  background: red;
  top:20px;
  left:20px;
  bottom: 20px;
  right: 20px;
  
}
span:nth-child(n+2) {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: green;
  bottom: 0;
  right: 0;
  -webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
  transform:rotate(90deg);
  background: purple;
}
span:nth-child(4) {
  transform:rotate(180deg);
  background: blue;
}
span:nth-child(5) {
  transform:rotate(-90deg);
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
  <span data-value="center"></span>
  <span data-value="bottom"></span>
  <span data-value="left"></span>
  <span data-value="top"></span>
  <span data-value="right"></span>
</div>