CODEWITHSUNDEEP
javascript
johny why
johny why

Reputation: 2221

How to enable javascript mouse events on overlapping html elements?

This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.

The fixed element is an empty div, so it is invisible.

Currently, the fixed element is blocking click events on the item under it.

Is it possible?

This solution is too complicated https://stackoverflow.com/a/9616491/209942

Possible solution? https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Thx

Upvotes: 5

Views: 2568

Answers (3)

Julien Grégoire
Julien Grégoire

Reputation: 17144

You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:

document.querySelector('#under').addEventListener('click', function(e) {
  e.target.style.color = "blue";
});

document.querySelector('#notunder').addEventListener('click', function(e) {
  e.target.style.color = "blue";
});
#fix {
  width: 60px;
  height: 200px;
  position: fixed;
  z-index: -1;
  top: 0px;
  border: 1px solid black;
}
#under {
  display: inline;
}
#fixnozindex {
  width: 100px;
  height: 200px;
  position: fixed;
  left: 75px;
  top: 0px;
  border: 1px solid black;
}
#notunder {
  display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>

Upvotes: 0

Saar
Saar

Reputation: 2306

although IE10 doesn't support it you can use

pointer-events: none;

http://jsfiddle.net/leaverou/XxkSC/light/

In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.

BR, Saar

Upvotes: 0

Jordan Littell
Jordan Littell

Reputation: 181

The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.

See this fiddle: https://jsfiddle.net/pv0mygz5/ -- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element. 

$('#click-me').on('click', function (e) {
    console.log('click triggered');
});

$('.box').on('mouseover', function (e) {
    //don't stop event from bubbling
    console.log('hover triggered');
});

Could you also include a code snippet that demonstrates your problem?

Upvotes: 1

Related Questions