Home is for the experience. Projects are for the ones who are interested!

How To Click Through an Overlay jQuery – Part 2

How To Click Through an Overlay jQuery – Part 2

In the last tutorial we talked about one method with which you can click through an overlay by jquery or other structure. As I said in the part one of this tutorial that method where you use css to achive this is not so good because you don't have that much control about the element you have just clicked.

But I will show you another method in my opinion much better because we will be able to get the element behind the overlay in a javascript variable and from here we can do anything we want with this element.

Using the following command you will get the element behind the overlay by the coordinates you provide from event.target:

var element = document.elementsFromPoint(x, y)

In this function x parameter is the pageX offset, so you will provide the distance from the left side of the viewport to the point where you clicked on the overlay, and y parameter is the distance from the top of the viewport to the point where you clicked. You need to account that you need to provide the coordinates of the viewport not of the document. 

To understand better what you need to provide for the above function take a look at the following function:

jQuery('#my_overlay').on('click', function(e){
   var elements = checkElement(e.clientX, e.clientY);
});

function checkElement(x,y){
   var elements = document.elementsFromPoint(x, y);
   return elements;
}

 

As you see I added all the code in a function which is waiting for 2 parameteres, when you call the function with the right parameteres, the function you return all elements from that position, then with a each loop you can get the element you need from that position.

Very important is to send the clientX and clientY coordinates because elementsFromPoint works only with the coordinates from the viewport. This function is very handy because as I said earliear you have all control over the elements. As you can see in the above function in elements variable I will get all the elements from that position, then I can access all the properties of that object.

But if you need something more easier you can check the first method of this tutorial how to click through an overlay with jquery part 1

Leave a Reply

Your email address will not be published. Required fields are marked *