Reputation: 73
I have multiple divs receiving mouse-mouse event like below, the divs overlapped in some area. If mouse pointer is on the overlapped area I need both of the events to fire (ie. printing blue and red), currently it only print red.
<div style="border: solid 1px blue;width:100px;height:100px;
position:absolute;top: 50px;left:50px;"
onMouseMove="console.log('blue');">
</div>
<div style="border: solid 1px red;width:100px;height:100px;
position:absolute;top: 20px;left:20px;"
onMouseMove="console.log('red');">
</div>
code: https://jsfiddle.net/0r1sjzgx/
Upvotes: 0
Views: 340
Reputation: 133
You can definitely try something like this.
function checkOverlap(object) {
var div1 = document.getElementById("myDiv1");
//positions of div1
var rect1 = div1.getBoundingClientRect();
var div2 = document.getElementById("myDiv2");
var rect2 = div2.getBoundingClientRect();
//X and Y co-ordinate of mouse
var x = event.clientX;
var y = event.clientY;
if ((x > rect2.left) && (y > rect2.top)) {
console.log('happy');
}
}
<div id="myDiv2" style="border: solid 1px blue;width:100px;height:100px;
position:absolute;top: 50px;left:50px;">
</div>
<div id="myDiv1" style="border: solid 1px red;width:100px;height:100px;
position:absolute;top: 20px;left:20px; z-index: 1;" onMouseMove="checkOverlap();">
</div>
Here "happy" will print if you hover on the overlapping part only.
Upvotes: 2