gpt4 book ai didi

javascript - 问 : mouseleave not triggered when expected in A-frame

转载 作者:行者123 更新时间:2023-12-01 02:12:46 24 4
gpt4 key购买 nike

当用户将鼠标悬停在某些动态创建的框实体上/从它们移开时,我试图更改它们的颜色。

它们总是在 mouseenter 上成功更改,但是似乎 mouseleave 并不总是被触发,因此有时它们会保留悬停颜色。

这是我的应用程序的基本版本:

<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
const COLOURS = {
default: '#ff0000',
hover: '#ffff00'
};

const blockMouseEnter = event => {
event.target.setAttribute('material', 'color', COLOURS.hover);
};

const blockMouseLeave = event => {
event.target.setAttribute('material', 'color', COLOURS.default);
};

AFRAME.registerComponent('stacks', {
init: function() {
const sceneElement = document.querySelector('a-scene');

for (var stackHeight = 0; stackHeight < 20; stackHeight++) {
const block = document.createElement('a-entity');

block.setAttribute('geometry', {
primitive: 'box',
width: 0.5,
height: 0.5,
depth: 0.025
});

block.setAttribute(
'position',
`0 ${stackHeight * 0.5} -5`
);

block.setAttribute('material', 'color', COLOURS.default);

sceneElement.appendChild(block);

block.addEventListener('mouseenter', blockMouseEnter);
block.addEventListener('mouseleave', blockMouseLeave);
}
}
});
</script>
</head>
<body>
<a-scene stacks>
<a-entity position="1 1.6 1" rotation="0 45 0">
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<a-sky color="#5CC8FA"></a-sky>
</a-scene>
</body>
</html>

This is video of the problem ,其中不应有超过一 block 黄砖。

有人知道这是为什么吗?

最佳答案

应该会在即将发布的 0.8.2 版 A-Frame 主版本中修复该问题。试试https://github.com/aframevr/aframe/commit/000e669f8eb242ed7b1fe2ef45c5607d99d46609

关于javascript - 问 : mouseleave not triggered when expected in A-frame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49654707/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com