当画布元素在表格控件中时，为什么不会触发鼠标事件？答案

【问题标题】：Why won't mouse events fire when a canvas element is inside a table control?当画布元素在表格控件中时，为什么不会触发鼠标事件？
【发布时间】：2014-05-21 18:07:08
【问题描述】：

当画布控件嵌套在我在 ASP.net 网页的自定义用户控件中使用的表格控件中时，我无法让鼠标事件正常工作。这里基本上是文件中唯一的 UI 代码：

<table>
    <tr>
        <td>
            <canvas id="canvas" width="100" height="200"></canvas>
        </td>
    </tr>
<table>

以及控制 mousedown 事件的 JavaScript 代码：

//...

//controls drag behavior
var dragok = false;
var x;
var y;

//...

function myDown(e) {
    if (e.layerX < 50 + canvas.offsetLeft && e.layerX > 0 +
    canvas.offsetLeft  && e.layerY < y + 25 + canvas.offsetTop &&
    e.layerX > y - 25 + canvas.offsetTop) {
        x = e.pageX - canvas.offsetLeft;
        y = e.pageY - canvas.offsetTop;

        dragok = true;
        canvas.onmousemove = myMove;
    }
}

//...

当我尝试在画布内单击并拖动时，没有任何反应。我无法判断该事件是否未触发或是否存在其他问题。想法？

【问题讨论】：

它对我有用。 jsfiddle.net/Ht3xx/1你能在没有的地方发一个小提琴吗？
奇怪，它也适用于我的 jsfiddle。我正在使用 ASP.net 进行开发，是否可能与此有关？我会更新问题。
我想出了一个解决方案，当问题被取消时我会发布答案。

标签： javascript html asp.net canvas

【解决方案1】：

我最终发现问题与我正在使用的画布的 offsetLeft 和 offsetTop 属性有关。出于某种原因，这似乎只是 ASP.net 中的一个问题，因为正如 Cristy 在他的评论中发布的那样，代码在 ASP 上下文之外工作得很好。为了解决我的问题，我咨询了this question；我编写了一个递归函数来获取父元素的偏移值，然后用它来修复我用于鼠标事件的偏移值。

function offset(elem)
{
    if (!elem) elem = this;

    var x = elem.offsetLeft;
    var y = elem.offsetTop;

    while(elem = elem.offsetParent)
    {
        x += elem.offsetLeft;
        y += elem.offsetTop;
    }

    return { left: x, top: y }
}

//...

function myDown(e) {
    if (e.layerX < 50 + offset(canvas).left &&
        e.layerX > offset(canvas).left &&
        e.layerY < 200 + offset(canvas).top &&
        e.layerY > offset(canvas).top) {

        x = e.pageX - offset(canvas).left;
        y = e.pageY - offset(canvas).top;

        document.getElementById("coord").value = Math.floor((200 - y) / 20);

        dragok = true;
        canvas.onmousemove = myMove;
    }
}

通过上面的链接：“offsetTop返回一个相对于offsetParent的值；你需要通过所有的父母递归地添加offsetParent.offsetTop直到offsetParent是null

【讨论】：