Say I have divA that partially overlaps divB. How can I allow clicks on divA to pass through to divB but still have hover fired when hovering over divA?

I'm aware of pointer-events:none; and this makes the clicks pass through but it also prevents the hover.

I have also tried the below, but it did not allow clicks to fall through

$(document).on('click', '.feedback-helper', function(e){
        e.preventDefault();
})

Picture the relation of the divs like:

Here is the why of it (read as: "let's avoid an X Y problem"):

I'm working on an implementation of feedback.js

To see the issue:

• view the feedback.js demo
• click the feedback button in the bottom right
• draw a box on the screen to highlight a section
• click the "black out" button
• try to draw a box inside the first box you can't because the click is blocked by the first box

I need to allow drawing a blackout box over a highlighted area but if I set pointer-events:none; I will lose other hover functionality I have on those elements.

Here is a jsFiddle example

All solutions wele

Say I have divA that partially overlaps divB. How can I allow clicks on divA to pass through to divB but still have hover fired when hovering over divA?

I'm aware of pointer-events:none; and this makes the clicks pass through but it also prevents the hover.

I have also tried the below, but it did not allow clicks to fall through

$(document).on('click', '.feedback-helper', function(e){
        e.preventDefault();
})

Picture the relation of the divs like:

Here is the why of it (read as: "let's avoid an X Y problem"):

I'm working on an implementation of feedback.js

To see the issue:

• view the feedback.js demo
• click the feedback button in the bottom right
• draw a box on the screen to highlight a section
• click the "black out" button
• try to draw a box inside the first box you can't because the click is blocked by the first box

I need to allow drawing a blackout box over a highlighted area but if I set pointer-events:none; I will lose other hover functionality I have on those elements.

Here is a jsFiddle example

All solutions wele

• javascript
• jquery
• html
• css

• how did you listen to the event that creates the "black out" blocks? maybe we can change something there? (for instance, apply this event also to boxes elements). edit: also try reading this vinylfox./forwarding-mouse-events-through-layers – Ronen Ness Commented Mar 8, 2016 at 16:33
• How about setting up a page level click event handler (window.addEventListener("click", function(evt) {...}) and in that function check the event.target to see what object actually initiated the event and react accordingly? – Scott Marcus Commented Mar 8, 2016 at 16:33
• @Ness Ill have a look into the source for the plugin and see, it uses canvas which I know little about so I was hesitant to change anything in there – Wesley Smith Commented Mar 8, 2016 at 16:35
• @ScottMarcus I'm hoping there's a more straightforward solution but Ill keep that in mind – Wesley Smith Commented Mar 8, 2016 at 16:36
• Why don't you just do this jsfiddle/Lg0wyt9u/162 – Nenad Vracar Commented Mar 8, 2016 at 16:45

3 Answers 3

I checked your example page and if you set a slightly lower z-index on data-type="highlight" that could take care of the problem, try a z-index of 29990 in parison to your current 30000. This should allow you to target the highlighted feedback area and overlay it with the blackout elements.

You could get the click event for the overlaying element to initiate the click event for the underlying element.

Native JS Example:

document.getElementById('divA').addEventListener('click', function() {
  alert('Clicked A');
});
document.getElementById('divB').addEventListener('click', function() {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('click', true, false);
  document.getElementById('divA').dispatchEvent(event);
});

div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}

<div id="divA"></div>
<div id="divB"></div>

jQuery Example:

$('#divA').on('click', function() {
  alert('Clicked A');
});
$('#divB').on('click', function() {
  $('#divA').trigger('click');
});

div {
  cursor: pointer;  
  border: 1px solid black;
}
#divA {
  height: 300px;
  width: 300px;
  background: whitesmoke;
}
#divB {
  height: 30px;
  width: 30px;
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
}
#divB:hover {
  background: green;  
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA"></div>
<div id="divB"></div>

Another option is to use a pseudo element instead. Perhaps that will do what you need.

$('#toggleBlack').on('click', function() {
  $('#divA').toggleClass('hidden');
});

div {
  border: 1px solid black;
}
#divA {
  background: whitesmoke;
  position: relative;
}
#divA.hidden:before {
  position: absolute;
  content: ' ';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">Highlight the text once I'm hidden and cut/copy/drag</div>
<br />
<br />
<button id="toggleBlack">Toggle Hidden</button>