Question

我有一个名为＆＃39; ball＆＃39;的div，div的每个边都有一个边框（border-top，border-left等）我想用JavaScript触发不同的事件当用户点击每个边框上的边框时。

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

HMTL：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

这是一个例子（我使用jQuery来简化，但你可以很容易地改为JS）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: