How to allow a click to go through a div, but still respond to a hang?

Question

Say I have a divA that partially overlaps divB . How to allow divA clicks to go to divB , but when starting hover when hovering over divA ?

I know pointer-events:none; , and it makes clicks go through, but also prevents hovering.

I also tried using below, but didn’t allow clicks

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

Depict the relation divs as:

Here's why (read how: “avoid the XY problem”):

I am working on implementing feedback.js

To see the problem:

• view feedback feedback.js
• Click the feedback button in the lower right.
• draw a window on the screen to highlight the section
• press the black button.
• try to draw a box inside the first window , you cannot, because the click is blocked by the first field

I need to be allowed to draw a dimming block over the selected area, but if I set pointer-events:none; I will lose another hover function that I use for these elements.

Here is a jsFiddle example

All solutions are welcome.

Answer 1

You can get a click event for an overlaying element to trigger a click event for an 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divA"></div> <div id="divB"></div> 

Answer 2

I checked your sample page, and if you set a slightly lower z-index in data-type = "highlight", which could solve the problem, try the z-index 29990 compared to your current 30000. This should allow you to target the selected the feedback area and overlay it on the dimming elements.

Answer 3

Another option is to use a pseudo element instead. Perhaps this 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.com/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>