StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can work around the problem in IE and Safari by using the offset and dimensions of each element associated with it. The following is an approach based on <a href="http://jsbin.com/uhuto/1/edit" rel="nofollow noreferrer">this demo</a>. Hopefully the comments explain the code well enough</p> <p>Pure Javascript</p> <pre><code>// Get all overlaying canvases var canvas = document.getElementsByTagName("canvas"), // Get all elements that you want the click to fire on background = document.getElementsByClassName("background"); // Use click location and dimensions/positioning to fake a click through function passThrough(e) { // Check all background elements for(var i = 0; i < background.length; i++) { // check if clicked point (taken from event) is inside element var mouseX = e.pageX; var mouseY = e.pageY; var obj = background[i]; var width = obj.clientWidth; var height = obj.clientHeight; if (mouseX > obj.offsetLeft && mouseX < obj.offsetLeft + width && mouseY > obj.offsetTop && mouseY < obj.offsetTop + height) { background[i].onclick(); // Force click event if within dimensions } } } for(var i = 0; i < canvas.length; i++) { // Force our function when clicked canvas[i].onmousedown = passThrough; } for(var i = 0; i < background.length; i++) { // Toggle background when clicked (to show it works) background[i].onclick = function() { if(this.style.background == "black") { this.style.background = "red"; } else { this.style.background = "black"; } } } </code></pre> <p><a href="http://jsfiddle.net/z7TUX/2/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI3c4.png" alt="jsFiddle"></a></p> <p>with jQuery</p> <pre><code>// Get all overlaying canvases var canvas = $("canvas"), // Get all elements that you want the click to fire on background = $(".background"); // Use click location and dimensions/positioning to fake a click through function passThrough(e) { // Check all background elements for(var i = 0; i < background.length; i++) { // check if clicked point (taken from event) is inside element var mouseX = e.pageX; var mouseY = e.pageY; var offset = background.eq(i).offset(); var width = background.eq(i).width(); var height = background.eq(i).height(); if (mouseX > offset.left && mouseX < offset.left + width && mouseY > offset.top && mouseY < offset.top + height) { background.eq(i).click(); // Force click event if within dimensions } } } for(var i = 0; i < canvas.length; i++) { // Force our function when clicked canvas.eq(i).off('mousedown').on('mousedown', passThrough); } for(var i = 0; i < background.length; i++) { // Toggle background when clicked (to show it works) background.eq(i).off('click').on('click', function() { if($(this).css("background-color") == "rgb(0, 0, 0)") { $(this).css("background-color", "red"); } else { $(this).css("background-color", "black"); } }); } </code></pre> <p><a href="http://jsfiddle.net/gbLHC/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NI3c4.png" alt="jsFiddle"></a></p> <p>Hopefully it fixes your issue!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload