Javascript-форум - Получить дочерний элемент по координатам клика.

Lemme,
кликая можно увидеть какой блок скрипт выбрал ближайшим и какое место на этом блоке ближе всего к точке клика :)
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>


<style>
.container {
	  display: flex;
	  justify-content: space-between;
	  padding: 120px;
	  background-color: #FF8C00;
	  border: 1px solid #999;
	  cursor: pointer;
	}

	span {
	  cursor: default;
	  padding: 0;
	  width: 100px;
	  height: 100px;
	  background-color: #32CD32;
	  color: #fff;
	  text-align: center;
	  font-size: 80px;
	  -webkit-user-select: none;
	  user-select: none;
	  -moz-user-select: none; /* fucking double click :D */
	}

.arrow {
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  position:  absolute;
  }
  .arrow:before,
  .arrow:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right: 0;
    }
  .arrow {
  width: 0px;
  height: 2px;
  background: #0000CD;
  }
  .arrow:after {
    top: -5px;
    right: 0px;
    border-left-color: #0000CD;
    border-width: 6px 0 6px 30px;
    }
  .arrow.replay:before,
  .arrow.replay:after {
    display: none;

    }
  .arrow.replay {
   border-radius: 50%;
   border: 2px solid #F0FFF0;
   width: 30px;
   height: 30px;
   margin-left: -15px;
   margin-top: -15px;

   background-color: transparent ;

  -webkit-animation: ripple 2s  ease-in-out infinite;
  -moz-animation: ripple 2s  ease-in-out infinite;
  -o-animation: ripple 2s  ease-in-out infinite;
  animation: ripple 2s  ease-in-out infinite;
}
 @keyframes ripple {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    margin-left: 0px;

  }
  100% {
    margin-left: -15px;

    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
 @-webkit-keyframes ripple {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}</style>
<div class="container">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="arrow"></div>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var e = document.querySelector(".container"),
        h = e.querySelectorAll("span"),
        d = document.querySelector(".arrow"),
        c;
    e.addEventListener("click", function(b) {
        var g = [];
        c = [].map.call(h, function(a) {
            a = a.getBoundingClientRect();
            c = a.left > b.clientX ? a.left : a.right < b.clientX ? a.right : b.clientX;
            c -= b.clientX;
            a = a.top > b.clientY ? a.top : a.bottom < b.clientY ? a.bottom : b.clientY;
            a -= b.clientY;
            g.push(360 - 180 / Math.PI * Math.atan2(a, c));
            return Math.sqrt(c * c + a * a)
        });
        var f = Math.min.apply(null,c),
            e = c.indexOf(f);
        d.style.left = b.clientX + "px";
        d.style.top = b.clientY + "px";
        d.style.width = (f ? f : 30) + "px";
        f ? (d.classList.remove("replay"),
        d.style.transform = "rotate(-" + g[e] + "deg)",
        d.style.webkitTransform = "rotate(-" + g[e] + "deg)") : d.classList.add("replay")
    })
});
</script>

</body>

</html>