JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<div id="parent">
    <div id="child"></div>
</div>

<!-- Задача:
- При клике на зелёную область должно срабатывать.
- При клике на часть красной области, которая находится "в пределах" родителя, должно срабатывать.
- При клике на часть красной области, которая находится "ВНЕ пределов" родителя, НЕ должно срабатывать.
-->

CSS

#parent { position: relative; width: 100px; height:100px; padding:20px; background: green; }

#child { position: relative; width: 150px; height:60px; padding:20px; background: red; }

JavaScript

document.getElementById('parent').onclick = function(e) {
 var x = mouseClick(e).x;
    var y = mouseClick(e).y;
    var top = getOffset(this).top;
    var left = getOffset(this).left;
    var bottom = top + this.offsetHeight - this.style.paddingTop - this.style.paddingBottom;
    var right = left + this.offsetWidth - this.style.paddingLeft - this.style.paddingRight;
    console.log( x + ':' + y + ':' + top + ':' + left + ':' + bottom + ':' + right);
    if (x < left || x > right || y < top || y > bottom) {
     alert('не попал');
        return false;
    } else alert('попал');
}

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}
function getOffsetSum(elem) {
    var top=0, left=0
    while(elem) {
        top = top + parseInt(elem.offsetTop)
        left = left + parseInt(elem.offsetLeft)
        elem = elem.offsetParent
    }
    return {top: top, left: left}
}
function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { top: Math.round(top), left: Math.round(left) }
}




function mouseClick(e){
	e = e || window.event
	if (e.pageX == null && e.clientX != null ) { 
		var html = document.documentElement
		var body = document.body
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}
	return { x: e.pageX, y: e.pageY}
}