[destus]

Окей. Для горизонтали.

<style>
        div {
	  display: flex;
	  justify-content: space-between;
	  padding: 30px;
	  background-color: #fff;
	  border: 1px solid #999;
	  cursor: pointer;
	}

	span {
	  width: 100px;
	  height: 100px;
	  background-color: tomato;
	  color: #fff;
	  text-align: center;
	  font-size: 80px;
	  -moz-user-select: none; /* fucking double click :D */
	}
    </style>

    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
<script>
var div = document.querySelector('div');
             div.addEventListener('click', function (e) {

                 var x = e.clientX;
                 var span = document.querySelectorAll('span');
                 var temp = span[0];
                 [].some.call(span, function (elem) {
                     if (elem.offsetLeft > x) {
                         var rightCoordBlock = temp.offsetLeft + temp.offsetWidth;
                         var lenBetweenBlock = elem.offsetLeft - (rightCoordBlock);
                         if ((rightCoordBlock + parseInt(lenBetweenBlock / 2)) < x) temp = elem;
                         return true;
                     }
                     temp = elem;
                 });                


                 [].forEach.call(span,function(elem){
                     (elem == temp) ? elem.innerHTML = '+' : elem.innerHTML = '';
                 })
             })
</script>