CODEWITHSUNDEEP
javascripthtmleventsdom-events
AHa
AHa

Reputation: 73

event capture by multiple absolute elements

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

Answers (1)

kallis
kallis

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

Related Questions