Q: mouseleave not triggered when expected in A-frame
Question
I'm trying to change the colour of some dynamically created box entities when the user mouses over/out from them.
They always successfully change on mouseenter , however it seems like mouseleave isn't always triggered so sometimes they keep the hover colour.
This is a basic version of my app:
<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 , where there should never be more than one yellow brick.
Does anyone know why this might be?
1 answers
solution1
2 ACCPTED 2018-04-04 19:46:02
It should be fixed in master versions of A-Frame soon going out as 0.8.2. Try https://github.com/aframevr/aframe/commit/000e669f8eb242ed7b1fe2ef45c5607d99d46609
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.