Question

我无法在Google Chrome中使用getBoundingClientRect（）。我的代码如下：

React.js渲染：

render() {
    return (
        <div className="TapTwo-container" ref="clickContainer" onClick={this._handleTap}>
            <div id="TapTwo-forkContainer" className="TapTwo-forkContainer u-animationLinear u-animationLoop tapTwo-moveForkLeft" ref="fork">
                <img src="img/fork.png" className="tapTwo-fork"/>
            </div>
            <div className="TapTwo-pieContainer">
                <img src="img/pie.png" className="tapTwo-pie" />
                <img src="img/plate.png" className="tapTwo-plate"/>
            </div>
       </div>
    )
}

函数_handleTap执行以下操作：

_handleTap() {
    let element = document.getElementById('TapTwo-forkContainer');
    let box = element.getBoundingClientRect()

    let top  = box.top;
    let left = box.left;

    console.log(Math.round(top),Math.round(left));
}

此处需要注意的事项：TapTwo-forkContainer使用CSS进行动画+转换。它从屏幕左侧移动到右侧，例如，其中一个关键帧：

@-webkit-keyframes moveForkLeft {
    0% {
         transform: translate(0,0);
    }
    100% {
        transform: translate(1250px, 0);
    }
}

当我在Firefox中测试时，每次点击我都会根据TapTwo-forkContainer的位置获得不同的值。但是，当我在谷歌浏览器（41.0.2272.118）中查看它时，我会一遍又一遍地获得相同的值。

这是一个演示（尝试向Click me按钮发送垃圾邮件并查看控制台中返回的值）

http://jsfiddle.net/d26cpdfk/4/

Answer 1

看起来getBoundingClientRect在Chrome中有问题。您可以使用getComputedStyle获取动画中的x或y值：

http://jsfiddle.net/d26cpdfk/1/

var element = document.getElementById('element')

    element.addEventListener('click', function(){
        console.log(element.getBoundingClientRect().left)

        var cs = window.getComputedStyle(element).transform
        var x = parseFloat(cs.split(', ')[4])
        console.log('getBoundingClientRect:',element.getBoundingClientRect().left, 'getComputedStyle:',x)
    }, false)

getBoundingClientRect在Chrome中返回相同的值

1 个答案: