JSFiddle - React, Tailwind, and code Playground

by tujger

HTML

<div class="fake">test</div>
<div class="out">
  <div class="fake">test</div>
  <div id="div" class="div"></div>
</div>

CSS

.div {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}
.fake {
  width: 23px;
  height: 10px;
}
.out {
  display: flex;
  
}

JavaScript

var div = document.getElementById("div");
div.addEventListener("click", function(evt) {
	console.log(calculateRegion.call(this, evt.x, evt.y));
});

function calculateRegion(x, y) {
  function checkIsPointInRegion(region, point) {
    var res = false;
    var bx = region[1].x - region[0].x;
    var by = region[1].y - region[0].y;
    var cx = region[2].x - region[0].x;
    var cy = region[2].y - region[0].y;
    var px = point.x - region[0].x;
    var py = point.y - region[0].y;
    var m = (px * by - bx * py) / (cx * by - bx * cy);
    if(m >= 0 && m <=1) {
      var l = (px - m * cx) / bx;
      if(l >= 0 && (m + l) <= 1) {
        res = true;
      }
    }
    return res
  }

	var rect = this.getBoundingClientRect();
  
  var lt = {x:rect.left, y:rect.top};
  var rt = {x:rect.right, y:rect.top};
  var lb = {x:rect.left, y:rect.bottom};
  var rb = {x:rect.right, y:rect.bottom};
  var center = {x:(rect.right-rect.left)/2, y:(rect.bottom-rect.top)/2};
  
  var top = [center, lt, rt];
  var right = [center, rt, rb];
  var bottom = [center, rb, lb];
  var left = [center, lb, lt];

  var res = null;
  var regions = {top:top,right:right,bottom:bottom,left:left};
  for(var r in regions) {
  	if(checkIsPointInRegion(regions[r], {x:x,y:y})) return r;
  }
  
}