Javascript 如何允许在具有画布覆盖的元素中选择文本（IE9不支持指针事件=无的问题）_Javascript_Css_Html_Internet Explorer_Html5 Canvas

Javascript 如何允许在具有画布覆盖的元素中选择文本（IE9不支持指针事件=无的问题）

javascript css html internet-explorer html5-canvas

Javascript 如何允许在具有画布覆盖的元素中选择文本（IE9不支持指针事件=无的问题）,javascript,css,html,internet-explorer,html5-canvas,Javascript,Css,Html,Internet Explorer,Html5 Canvas,我一直在寻找解决IE9/10中缺少指针事件属性支持的方法。这里还有几个其他相关的帖子：我可以转发鼠标事件，如鼠标向下、向上和移动。但我真正的问题是如何让文本选择工作——如何能够选择画布下元素中的文本。在下面的示例中，我使用document.elementFromPoint和事件的坐标，以便在画布下找到要将事件转发到的元素。但这不适用于selectstart之类的事件，因为事件中没有坐标信息。它也不适用于mousein/out，因为这些事件只在画布边缘触发。正如我所说，mousemove可

我一直在寻找解决IE9/10中缺少指针事件属性支持的方法。这里还有几个其他相关的帖子：

我可以转发鼠标事件，如鼠标向下、向上和移动。但我真正的问题是如何让文本选择工作——如何能够选择画布下元素中的文本。在下面的示例中，我使用document.elementFromPoint和事件的坐标，以便在画布下找到要将事件转发到的元素。但这不适用于selectstart之类的事件，因为事件中没有坐标信息。它也不适用于mousein/out，因为这些事件只在画布边缘触发。正如我所说，mousemove可以工作，但是使用该事件不允许我选择文本

有没有人找到了解决办法，或者有什么建议

<!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>


测试1
测试2
测试3
测试4
测试5
画布
var main=document.getElementById（“div”）；
var canvas=document.getElementById（“canvas”）；
var forwardAnEvent=函数（事件）{
var display=canvas.style.display；
canvas.style.display=“无”；
var bottomElement=document.elementFromPoint（event.clientX，event.clientY）；
canvas.style.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.dispatchEvent（eventCopy）；
event.stopPropagation（）；
}
//在画布上设置事件处理程序并转发到下面的元素。
//鼠标悬停不起作用，因为当事件发生在画布上时
//除了主div之外，鼠标下没有其他内容。
//非鼠标事件（如selectstart）将不起作用，因为没有
//协调事件中要发送到document.element frompoint的信息。
//如何为画布下的元素选择文本？？
canvas.addEventListener（“鼠标悬停”，函数（事件）
{
log（“mouseover:+event.target.innerHTML”）；
forwardAnEvent（事件）；
event.stopPropagation（）；
}
，假）；
canvas.addEventListener（“鼠标向下”，函数（事件）
{
log（“mousedown:+event.target.innerHTML”）；
forwardAnEvent（事件）；
event.stopPropagation（）；
}
，假）；
canvas.addEventListener（“mouseup”，函数（事件）
{
log（“mouseup:+event.target.innerHTML”）；
forwardAnEvent（事件）；
event.stopPropagation（）；
}
，假）；
//在所有元素上设置事件处理程序。。。
for（var i=0；i