I have been looking for a solution for the lack of support for the pointer-events property in IE9/10. There are a couple of other related posts here:
css 'pointer-events' property alternative for IE
How to make Internet Explorer emulate pointer-events:none?.
And I can forward mouse events such as mousedown, up & move. But my real problem is how to get text selection to work - how to be able to select text that are in elements beneath the canvas. In the example I have below, I use document.elementFromPoint with the coordinates from the event in order to find the element beneath the canvas to forward the event to. But that doesn't work for events such as selectstart because there is no coordinate information in the event. It also doesn't work for mousein/out because those events only fire on the canvas edge. As I said, mousemove works, but working with that event doesn't allow me to select text.
Has anyone found a solution for this, or have suggestions?
<!DOCTYPE html>
<head>
</head>
<body>
<div id="div" style="background-color: pink; width: 500px; height: 500px; position: absolute;">
<span style="background-color: yellow; position: absolute; left: 0px">Test 1</span>
<span style="background-color: red; position: absolute; left: 50px">Test 2</span>
<span style="background-color: blue; position: absolute; left: 100px">Test 3</span>
<span style="background-color: green; position: absolute; left: 150px">Test 4</span>
<span style="background-color: purple; position: absolute; left: 200px">Test 5</span>
<canvas id="canvas" style="background-color: gray; position: absolute; width: 100%; height: 100%; opacity: .5;">The canvas</canvas>
</div>
<script type="text/javascript">
var main = document.getElementById("div");
var canvas = document.getElementById("canvas");
var forwardAnEvent = function(event){
var display = canvas.style.display;
canvas.style.display = "none";
var bottomElement = document.elementFromPoint(event.clientX, event.clientY);
canvas.style.display = display;
var eventCopy = document.createEvent("MouseEvents");
eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
event.shiftKey, event.metaKey, event.button, event.relatedTarget);
if (bottomElement)
bottomElement.dispatchEvent(eventCopy );
event.stopPropagation();
}
// Set event handlers on the canvas and forward to elements beneath.
// mouseover won't work because when the event happens on the canvas, there
// is nothing else under the mouse except the main div.
// Non-mouse events, such as selectstart, won't work because there is no
// coordinate information in the event to send to document.elementFromPoint.
// How can text selection work for the <span> elements beneath the canvas??
canvas.addEventListener("mouseover", function(event)
{
console.log("mouseover: " + event.target.innerHTML);
forwardAnEvent(event);
event.stopPropagation();
}
, false);
canvas.addEventListener("mousedown", function(event)
{
console.log("mousedown: " + event.target.innerHTML);
forwardAnEvent(event);
event.stopPropagation();
}
, false);
canvas.addEventListener("mouseup", function(event)
{
console.log("mouseup: " + event.target.innerHTML);
forwardAnEvent(event);
event.stopPropagation();
}
, false);
// Set event handlers on all of the <span> elements...
for (var i = 0 ; i < main.children.length; i++)
{
if (main.children[i].tagName == "CANVAS")
{
continue;
}
main.children[i].addEventListener("mouseover", function(event)
{
console.log("mouseover: " + event.target.innerHTML);
event.stopPropagation();
}
, false);
main.children[i].addEventListener("mousedown", function(event)
{
console.log("mousedown: " + event.target.innerHTML);
event.stopPropagation();
}
, false);
main.children[i].addEventListener("mouseup", function(event)
{
console.log("mouseup: " + event.target.innerHTML);
event.stopPropagation();
}
, false);
}
main.addEventListener("mouseover", function(event){
console.log("moving over div.");
event.stopPropagation();
}
, false);
main.addEventListener("mousedown", function(event){
console.log("mousedown div.");
event.stopPropagation();
}
, false);
main.addEventListener("mouseup", function(event){
console.log("mouseup div.");
event.stopPropagation();
}
, false);
</script>
</body>
</html>
