为此苦苦挣扎了一段时间,所以我决定制作一个 jsfiddle 来展示一个示例:
gameworld = document.getElementById('GameWorld');
character = document.getElementById('c');
gameworld.addEventListener('click', function(e){
console.log(e);
character.style.left=''+e.offsetX+'px';
character.style.top=''+e.offsetY+'px';
});
在这里摆弄:http://jsfiddle.net/g43nxhcw/1/
如果单击红色容器上的任意位置,您将获取 offsetX
和 offsetY
。但是,如果您单击图 block ,则会获取其偏移量,这会导致 Angular 色无法移动到该位置。
我想做的是抓取GameWorld的
offsetX
和offsetY
,即使点击了图 block ,这可能吗?
查看控制台时,我们可以看到 e.target
显示用户单击了哪个元素。这几乎是我能得到的最接近的结果,因为当单击 GameWorld 的父子元素时,我需要找到 GameWorld 元素的偏移量。
当单击 img
图 block 时,我可以通过访问以下内容来访问 GameWorld
节点:
e.path[0]
,相关 here
可悲的是,这就是我陷入困境的地方,不知道该用节点树抓取什么。
编辑:我也不想使用pointer-events
,因为这似乎是解决问题的一个简单方法,而对于稍后的碰撞检测,它将成为一个问题。
编辑2:警告
我在这些值上使用了 transform:translate(X,Y)
并且它们不会传递到 DOM(用于偏移量),所以如果有人陷入困境,请记住添加 top:
和 left:
属性,用于 dom 捕获偏移量和值。
最佳答案
您可以添加子项的 offsetLeft
和 offsetTop
属性。对于任意深度(看起来更干净):
var offsetX = e.offsetX;
var offsetY = e.offsetY;
var element = e.target;
while (element !== gameworld) {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
element = element.parentNode;
}
character.style.left = offsetX + 'px';
character.style.top = offsetY + 'px';
关于javascript - 如何获取父div的offsetX?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30155812/