Call a function on a div with different borders

Question

I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.

ex: user clicks on border-top console.log('top') and so on

HMTL:

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

I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.

Answer 1

You can simulate this by adding extra elements.

Here is an exmaple (I used jQuery for simplicty but you can easily change to 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>