javascript - 获取点击位置在元素中的坐标

Question

现在有如下结构 {代码...} a的高度比b小，且a可以滚动。超出a的部分不显示。 a与html之间有若干节点，且样式不固定 当我在b元素内点击时，我要如何获取这个点击的位置，相对于b左上角的坐标

黄舟 · Answer

大家讲道理 · Answer

function getElementPosition(e) {
    var box = e.getBoundingClientRect();
    var offsets = getScrollOffsets();
    return {
        x: box.left + offsets.x,
        y: box.top + offsets.y
    }
}

function getScrollOffsets(w) {
    w = w || window;
    //除了ie8及更早版本，其他浏览器都可以使用
    if (w.pageXOffset != null) {
        return {
            x: w.pageXOffset,
            y: w.pageYOffset
        }
    }
    //对于标准模式向的IE（或任何浏览器）
    var d = w.document;
    if (document.compatMode == 'CSS1Compat') {
        return {
            x: d.documentElement.scrollLeft,
            y: d.documentElement.scrollTop
        };
    }
    //对怪异模式下的浏览器
    return {
        x: d.body.scrollLeft,
        y: d.body.scrollTop
    };
}