{"id":396,"date":"2017-03-15T10:10:47","date_gmt":"2017-03-15T10:10:47","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=396"},"modified":"2017-03-29T17:43:23","modified_gmt":"2017-03-29T12:13:23","slug":"click-through-div-to-underlying-elements","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/click-through-div-to-underlying-elements\/","title":{"rendered":"[Solved &#8211; 10 Answers] Click through a DIV to underlying elements"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>we have a div that has background:transparent, along with border. Under this div, we have more elements.<\/li>\n<li>Currently, we able to click the underlying elements when we click outside of the overlay div. then<\/li>\n<li>It was unable to click the underlying elements when we directly click on overlay div<\/li>\n<li>.we need to click through this div tag Then only we can able to click on the underlying elements.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Using pointer-events: none along with CSS conditional statement for IE11.<\/li>\n<li>Using AlphaImageLoader, you can even set transparent .PNG\/.GIFs in the overlay div and clicks through a DIV elements below.<\/li>\n<\/ul>\n<ul>\n<li><strong>CSS:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dpointer-events%3A%20none%3B%0Abackground%3A%20url(\u2018your_transparent.png\u2019)%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li><strong>IE11 conditional:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dfilter%3Aprogid%3ADXImageTransform.Microsoft.AlphaImageLoader(src%3D\u2019your_transparent.png\u2019%2C%20sizingMethod%3D\u2019scale\u2019)%3B%0Abackground%3A%20none%20!important%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Here we can use elementFromPoint method.<\/li>\n<li>Attach a click to the div you want to be clicked through<\/li>\n<li>Hide it<\/li>\n<li>Determine what element the pointer is on<\/li>\n<li>Fire the click on the element there.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dvar%20range-selector%3D%20%24(%22%22)%0A%20%20%20%20.css(%22position%22%2C%20%22absolute%22).addClass(%22range-selector%22)%0A%20%20%20%20.appendTo(%22%22)%0A%20%20%20%20.click(function(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20_range-selector.hide()%3B%0A%20%24(document.elementFromPoint(e.clientX%2Ce.clientY)).trigger(%22click%22)%3B%0A%7D%0A)%3B%0A%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This works on IE8\/9, Safari Chrome and Firefox.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Hide overlaying the element<\/li>\n<li>Determine cursor coordinates<\/li>\n<li>Get element on those coordinates<\/li>\n<li>Trigger click on element<\/li>\n<li>Show overlaying element again<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23elementontop).click(function%20(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(\u2018%23elementontop).hide()%3B%0A%20%20%20%20%20%20%20%20%24(document.elementFromPoint(e.clientX%2C%20e.clientY)).trigger(%22click%22)%3B%0A%20%20%20%20%20%20%20%20%24(\u2018%23elementontop\u2019).show()%3B%0A%7D)%3B%20%0A%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>Using jQuery-click through a div to underlying elements:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018.overlay\u2019).click(function(e)%0A%7B%0A%20%20%20%20var%20left%20%3D%20%24(window).scrollLeft()%3B%0A%20%20%20%20var%20top%20%3D%20%24(window).scrollTop()%3B%0A%0A%20%20%20%20%2F%2Fhide%20the%20overlay%20for%20now%20so%20the%20document%20can%20find%20the%20underlying%20elements%0A%20%20%20%20%24(this).css(\u2018display\u2019%2C\u2019none\u2019)%3B%0A%20%20%20%20%2F%2Fuse%20the%20current%20scroll%20position%20to%20deduct%20from%20the%20click%20position%0A%20%20%20%20%24(document.elementFromPoint(e.pageX-left%2C%20e.pageY-top)).click()%3B%0A%20%20%20%20%2F%2Fshow%20the%20overlay%20again%0A%20%20%20%20%24(this).css(\u2018display\u2019%2C\u2019block\u2019)%3B%0A%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>Absolute positioning for underlying elements:<\/li>\n<\/ul>\n[pastacode lang=\u201djava\u201d manual=\u201d%23overlay%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%20-79px%3B%0A%20%20left%3A%20-60px%3B%0A%20%20height%3A%2080px%3B%0A%20%20width%3A%20380px%3B%0A%20%20z-index%3A%202%3B%0A%20%20background%3A%20url(fake.gif)%3B%0A%7D%0A%0A%3Cdiv%20id%3D%22overlay%22%3E%3C%2Fdiv%3E%0A\u201d message=\u201djava code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>By adding pointer-events: none; to the absolute block.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%20%0A%7B%0A%20%20margin%3A%200%3B%0A%20%20padding-left%3A%2010px%3B%0A%20%20font%3A%2020px%20Arial%2C%20sans-serif%3B%0A%20%20line-height%3A%2030px%3B%0A%7D%0Aa%3Ahover%20%0A%7B%20%20color%3A%20blue%3B%0A%7D%0A%23overlay-blocking%2C%0A%23overlay-passing%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20height%3A%2040px%3B%0A%20%20width%3A%2010em%3Bleft%3A%200%3B%0A%7D%0A%23overlay-blocking%20%0A%7B%0A%20%20top%3A%2030px%3B%0A%20%20background%3A%20rgba(0%2C100%2C0%2C%20.2)%3B%20%20%20%20%0A%20%20pointer-events%3A%20none%3B%0A%7D%0A%23overlay-passing%20%0A%7B%20%0Atop%3A%200%3B%0A%20%20background%3A%20rgba(100%2C0%2C0%2C%20.2)%3B%20%20%20%20%0A%7D%0A%3Ca%20href%3D%22%23%22%3ELink%20blocked%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%20%20%20%20%0A%3Cdiv%20id%3D%22overlay-blocking%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22overlay-passing%22%3E%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Using Tags to click through a div to underlying elements:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Ca%20href%3D%22%2Fcategories%2F1%22%3E%0A%20%20%20%20%3Cimg%20alt%3D%22test1%22%20class%3D%22img-responsive%22%20src%3D%22%2Fassets%2Fphoto.jpg%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22caption%20bg-orange%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test1%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fa%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Using array to underlying elements<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dvar%20clickarray%3D%5B%5D%3B%0Afunction%20getcoo(thatdiv)%0A%7B%0A%20%20%20%20%20%20%20%20%20thatdiv.find(%22.link%22).each(function()%0A%7B%0A%20%20%20%20%20%20%20%20%20%20var%20offset%3D%24(this).offset()%3B%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20clickarray.unshift(%5B(offset.left)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.top)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.left%2B%24(this).width())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(offset.top%2B%24(this).height())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(%24(this).attr(\u2018name\u2019))%2C%0A%20%20%20%20%20%20%20%20%20%201%5D)%3B%0A%7D)%3B%0A%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><strong>Using array<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(%22body%22).click(function(event)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20event.preventDefault()%3B%2F%2Fif%20it%20is%20a%20a-tag%0A%20%20%20%20%20%20%20%20%20%20var%20x%3Devent.pageX%3B%0A%20%20%20%20%20%20%20%20%20%20var%20y%3Devent.pageY%3B%0A%20%20%20%20%20%20%20%20%20%20var%20job%3D%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20for(var%20i%20in%20clickarray)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(x%3E%3Dclickarray%5Bi%5D%5B0%5D%20%26%26%20x%3C%3Dclickarray%5Bi%5D%5B2%5D%20%26%26%20y%3E%3Dclickarray%5Bi%5D%5B1%5D%20%26%26%20y%3C%3Dclickarray%5Bi%5D%5B3%5D%20%26%26%20clickarray%5Bi%5D%5B5%5D%3D%3D1)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20job%3Dclickarray%5Bi%5D%5B4%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clickarray%5Bi%5D%5B5%5D%3D0%3B%2F%2Fset%20to%20allready%20clicked%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%7D%0A%7D%0A%20%20%20%20%20%20%20%20%20%20if(job.length%3E0)%0A%7B%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20\u2013do%20some%20thing%20with%20the%20job%20\u2013%0A%7D%0A%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>pseudo html code to click through a div<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22listContainer%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow1%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%231%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow2%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%232%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li><strong>jQuery code:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(%22div.listRow%22).click(function()%0A%7B%0A%20%20%20%20%24(this).toggleClass(%22selected%22)%3B%0A%7D%0A)%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>Using a combination of the applying a :hover selector on parent div and the pointer-events: none directive on the child div.<\/li>\n<\/ul>\n<ul>\n<li><strong>HTML:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22container%22%3E%0A%3Cdiv%20class%3D%22clickthrough%22%3EMouseover%3C%2Fdiv%3E%0A%20%3Cbutton%20onClick%3D%22alert(\u2018click!\u2019)%3B%22%3EClick%20me%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li><strong>CSS:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.container%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A.clickthrough%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%7D%0A.container%3Ahover%20.clickthrough%20%0A%7B%0A%20%20%20%20opacity%3A%200.25%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM we have a div that has background:transparent, along with border. Under this div, we have more elements. Currently, we able to click the underlying elements when we click outside of the overlay div. then It was unable to click the underlying elements when we directly click on overlay div .we need to click through [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[801,808,795,802,790,806,796,803,788,798,791,811,793,799,789,809,800,797,807,805,810,794,792,804],"class_list":["post-396","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-but-underneath-clickable","tag-can-i-use-pointer-events","tag-click-through-a-div-to-underlying-elements","tag-click-through-div","tag-click-through-elements-pointer-events-none","tag-click-through-transparent-png","tag-clicking-through-a-div-to-underlying-elements","tag-creating-a-click-through-div","tag-css-click-through-a-div-to-underlying-elements","tag-css-pointer-events-property-alternative-for-ie","tag-css-pointer-events-to-allow-clicks-on-underlying-elements","tag-forwarding-mouse-events-through-layers","tag-htmlcss-make-clickable-through-transparent-div-layer","tag-image-overlay-you-can-click-through","tag-javascript-how-to-disable-clicking-inside-div","tag-javascript-prevent-click-through","tag-make-element-appear-on-top","tag-passing-click-events-through-a-blocking-element","tag-pointer-events-none","tag-pointer-events-click-only","tag-pointer-events-ie10","tag-pointer-eventsnone-or-click-through-div","tag-prevent-click-event-on-certain-child-element-using-jquery","tag-prevent-click-through-div"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}