Javascript 为什么赢了'；当canvas元素位于表控件内时触发t鼠标事件？

当画布控件嵌套在表控件中时，我很难让鼠标事件正常工作。我在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;
    }
}

//...

/。。。
//控制拖动行为
var-dragok=false；
var x；
变量y；
//...
函数myDown（e）{
如果（e.layerX<50+canvas.offsetLeft&&e.layerX>0+
canvas.offsetLeft和&e.layerYy-25+画布。偏移）{
x=e.pageX-canvas.offsetLeft；
y=e.pageY-canvas.offsetTop；
德拉戈克=真；
canvas.onmousemove=myMove；
}
}
//...

---

当我尝试在画布中单击并拖动时，什么都没有发生。我不知道事件是否正在进行，或者是其他问题。想法？

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

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;
    }
}

功能偏移量（elem）
{
如果（！elem）elem=this；
var x=元素偏移量；
变量y=元素偏移量；
while（elem=elem.offsetParent）
{
x+=元素偏移量；
y+=元素偏移；
}
返回{left:x，top:y}
}
//...
函数myDown（e）{
如果（如层x<50+偏移量（画布）。左&&
e、 layerX>偏移（画布）。左侧&&
e、 层数<200+偏移量（画布）。顶部&&
e、 图层>偏移（画布）.top）{
x=e.pageX-偏移量（画布）。左侧；
y=e.pageY-偏移量（画布）。顶部；
document.getElementById（“coord”）.value=Math.floor（（200-y）/20）；
德拉戈克=真；
canvas.onmousemove=myMove；
}
}

---

通过以上链接：“

offsetTop

返回相对于

offsetParent

的值；您需要通过所有父项递归添加

offsetParent.offsetTop

，直到

offsetParent

为

null

它对我有效。你能在没有小提琴的地方贴一把小提琴吗？奇怪的是，它对我来说也适用于JSFIDLE。我正在使用ASP.net进行开发，是否可能与此有关？我会更新这个问题。我想出了一个解决方案，等问题解决后我会发布答案。