Passing Mouse Clicks Through an Overlaying Element <Div>

Passing mouse clicks through an overlaying element div

You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.

See this SO question for more info about elementFromPoint:

How do I find the DOM node that is at a given (X,Y) position? (Hit test)

Click through div to underlying elements

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

Detect mousemove but let click events pass through

In that case you need to get the mousemove events from the window, not the overlay.

$(window).mousemove( function(e){
    $('.v').css('left', e.clientX + 'px');
    $('.h').css('top', e.clientY + 'px');
});

Demo: http://jsfiddle.net/jze4acsd/1/

(Or if window is too broad for you, use the nearest parent of the elements you are interacting with - it would give you the same coordinates as the overlay)

Click through an element, affecting what's behind it

Use CSS pointer-events:

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

#container-content {
    width:100%;
    height:auto;
    pointer-events: none;
}

If you need support for IE 10 and lower, there's a polyfill.

Pass mouse events through absolutely-positioned element

pointer-events: none;

Is a CSS property that makes events "pass through" the HTML-element to which the property is applied. It makes the event occur on the element "below".

See for details: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

It is supported by almost all browsers, including IE11; global support was ~98.2% in 05/'21): http://caniuse.com/#feat=pointer-events (thanks to @s4y for providing the link in the comments).

How to click through fixed overlay div, without disabling its pointer events

okay, so you cannot really pass a click event programmatically and have x and y coordimates (as seen in the fiddle I attached).

What you can do is define global vars that store x and y coords on click of div. and then trigger click on canvas like this:

var div = document.querySelector('#theDiv')
var canvas = document.querySelector('#theCanvas')
var x = 0;
var y = 0;

div.addEventListener('click', function(event) { 
  console.log('div clicked', event); // event.clientX and event.clientY have correct values
  x = event.clientX;
  y = event.clientY;
  canvas.click();
});

canvas.addEventListener('click', function(event) {
  console.log('canvas clicked', x, y, event); // event.clientX and event.clientY are both 0
})

Here is the fiddle, where you can see it in action (I have added some styles to differentiate between the div and canvas)

https://jsfiddle.net/m1n4xave/10/

pass mouse hover event to lower layer while overlay div elements which has a menu remains clickable

Using JQuery you can say that if you hover over either element then do "something" :

$('.canvasClassName, .menuClassName').mouseover(function () { /*Canvas Action*/ });

Where canvas/menu ClassName would be a class of the object. (Using other properties like id is also valid using a # instead of a period)

The hover effect will work if you hover over the canvas or the menu while maintaining the menu's useability.

selecting an element on mouse click overlapped by another transparent div

You can use JavaScript or jQuery to get the position of the inner image, and when the user clicks on the outer image, check to see whether the mouse position lies within the range of the smaller image. The range can be calculated with the position, width, and height of the inner element.

To get the element's position: use jQuery .offset() or .position() (The former is relative to the document, the latter to the parent).

To get the mouse position: http://docs.jquery.com/Tutorials:Mouse_Position

---

Related Topics