JQuery - Trigger click on an item behind

Question

My problem is that I have this aka container box. Inside this container there are fields that the user can click.

To visually help the user, I made overlay boxes with a gray faded color that tells them that they can use the fields here.

But my problem is that the click event is in the boxes outside the overlay window.

So, is there a way to ignore the .click() element and use the following purpose?

Answer 1

You can use the CSS property pointer-events :

The CSS pointer-events property allows authors to control under what circumstances (if any) a particular graphic element can become an object of mouse events.

 #element { pointer-events: none; } 

Or you can trigger click event:

 $('#box').click(function(){ $('#target').trigger('click') }) 

Answer 2

Avoiding CSS pointer-events ...

First, make sure all the boxes it contains have the class name box (or the like).

Secondly, make the fields inactive with .addClass('inactive') (with the corresponding CSS directives in the stylesheet to keep track of the background color and border). To reactivate the fields, simply .removeClass('inactive') .

Thirdly, delegate the processing of clicks on the boxes into the container as follows:

 $('#container').on('click', '.box', function() { //common behaviour (pre) if($(this).hasClass("inactive")) { //inactive box behaviour } else { //active box behaviour } //common behaviour (post) }); 

Answer 3

You can use Expression Expression Expression (IIFE), developed by Ivan Castellanos , which detects where the mouse pointer is (x, y) and evaluates to true or false on the element of your choice if the mouse was actually over that element.

Using the Ivan code, I was able to create this proof of concept, which will give the same results as pointer-events: none; but a little more compatible in browsers. It uses the jQuery .offset() method. In jsFiddle there is a page with 3 elements, two <button> and one <div> , which is superimposed on top of buttons with an opacity of 50%. Under normal circumstances, you cannot click on these elements without changing the z-index.

JsFiddle example

 //CSS Hitbox Solution 08-26-2015 //StackOverflow - https://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input //Detect MouseOver https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery //Source: https://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position //https://css-tricks.com/snippets/jquery/get-xy-mouse-coordinates/ (function($) { $.mlp = { x: 0, y: 0 }; // Mouse Last Position function documentHandler() { var $current = this === document ? $(this) : $(this).contents(); $current.mousemove(function(e) { jQuery.mlp = { x: e.pageX, y: e.pageY }; }); $current.find("iframe").load(documentHandler); } $(documentHandler); $.fn.ismouseover = function(overThis) { var result = false; this.eq(0).each(function() { var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this); var offset = $current.offset(); result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y; }); return result; }; })(jQuery); $('.notification-box').on("click", function() { $("button").each(function(i) { var iteratedButton = $('button:eq(' + i + ')'); var buttonID = iteratedButton.attr("id"); if (iteratedButton.ismouseover()) { iteratedButton.toggleClass(buttonID); } }); }); 

 .notification-box { position: absolute; height: 100vw; width: 100vw; background-color: black; opacity: 0.5; /*pointer-events: none;*/ z-index: -10; overflow: visible; } button { position: absolute; top: absolute; width: 50px; z-index: -10; } button#no { margin-top: 25px; } .yes { color: red; font-weight: bold; } .no { color: blue; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <button id='yes'>Yes</button> <button id='no'>No</button> <div id='no' class="notification-box" />