Question

我想获取画布的X和Y坐标，我正在使用this question中建议的解决方案。为了便于参考，这里是我正在使用的功能（包括一点调试警报消息）：

function getCumulativeOffset(obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            alert("obj id = " + obj.tagName + " (" + obj.id + ")");
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

但是，我没有得到我期望的结果。现在，我已将我的问题跟踪到getCumulativeOffset函数，而不是在我的HTML中拾取article标签。这里是相关的HTML：

<body>
    <article>
        <canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas>
    </article>

    <div id="temp"></div>
</body>

相关的CSS：

article, aside, figure, footer, header, hgroup, nav, section {
    display:block
}
body {
    font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif;
    padding: 0;
    margin: 0 auto;
    width: 40em;
    line-height: 1.75;
    word-spacing: 0.1em
}
article {
    text-align: center;
}
#pizza {
    display: inline-block
}

出于某种原因，当我测试该函数时，看起来article标签不是画布的offsetParent，正如我所期望的那样。这是输出：

obj id = CANVAS（披萨）
bj id = BODY（）

有人可以解释一下吗？

Answer 1

offsetParent引用的元素是最接近的定位祖先元素，如果没有找到，则返回一些元素的规则（在MDN处为offsetParent）。为position: relative设置<article>应该可以解决您的问题。

为什么offsetParent会忽略我的文章标签？

1 个答案: