Search jQuery

jQuery Forum

Passing click events through a blocking element

in Using jQuery • 11 years ago

I have a script that's dimming the page by appending a black transparent canvas element to the body, positioning it over the page with a high z-index, and then using clearRect to cut out the sections of canvas element so that certain sections of the actual site show through..

I'm having a hard time figuring out the best way to pass a click through the canvas and onto whatever would accept it if the canvas wasn't in the way so a user can edit the text.

my first choice was hiding the canvas on mousedown, and then listening for mouseup for everything underneath. but it looks terrible to have that 200ms flicker.

can a trigger() be used to emulate a click at a certain (pageX,pageY)?

the last option i can think of would be adding 30 divs and duplicate the punched-out canvas..

but that seems like a lot of math

does anyone know of a plugin that does this? a reverse blockUI

Thanks so much for reading. I would appreciate any ideas for more brainstorming

Replies(6)

superfici..

Re: Passing click events through a blocking element

11 years ago

i would suggest to make 4 divs which you could position to fake the overlay.

this way you wont have any html elements on top of the items you want to click on.

saetia

Re: Re: Passing click events through a blocking element

11 years ago

..I was afraid this was going to be the best method.

It'd be simple with only a few elements. but, when it's random elements that don't align to a grid... i'll have to check to make sure the box isn't intersecting with any previous elements. yuck

superfici..

Re: Passing click events through a blocking element

11 years ago

after reading your 2nd mssg i fully understand the screenshot, and what your trying to do.

maybe theres another way.

im thinking of 2 options.

1st: add a transparent div on top of the whole page and clone the editable nodes on top of that.

2nd: add a transparent div on top of the page and z-index all the editable element on top of it, this would cause some issues with older version of IE though as the miserably fail to implement z-index in any usable manner.

saetia

Re: Re: Passing click events through a blocking element

11 years ago

Ooh, sounds good to me! I'll try cloning them - some elements are nested pretty deep, i don't think z-index could bring a nested element higher than a direct child of the body.. right?

hmm.. maybe jQueryUI 1.8 "z-index" enables this?? I'll check it out.

I honestly don't even care about supporting IE8. Thanks for the help!

kapilreddy

Re: Passing click events through a blocking element

10 years ago

I am also facing same problem, I got a solution by trying another layer for listening to events above the effect layer(canvas), another solution is applying this css to the canvas layer. Its a CSS3 property but works in most leading browsers.

pointer-events:none

pingram35..

Re: Passing click events through a blocking element

7 years ago

I had actually came across this when I was researching if there existed a rule to allow a div to pass events through/underneath because often the element stacking order is too restrictive.

Using the below example where div 4 is the overlay, no matter how high the z-index of divs 2 and 3, as long as div 1 is under the stacking order of 4, nothing in divs 1,2 or 3 are clickable (where div 4 covers them), or respond to other events such as mouseover, etc.

</div>

</div>

see example - http://codepen.io/pingram3541/pen/hvtFH

The css rule above works, except in IE - even v10.

Top Reply

Response title

Attachments

jQuery Forum

Passing click events through a blocking element

Replies(6)

Re: Passing click events through a blocking element

Re: Re: Passing click events through a blocking element

Re: Passing click events through a blocking element

Re: Re: Passing click events through a blocking element

Re: Passing click events through a blocking element

Re: Passing click events through a blocking element

Statistics

Tags

Actions