0
votes

strange behavior with fuse cursor. I've set fuse false for cursor both mainscene and a-cursor, but fuse still appears on hover.

This problems is apeearing when testing on ios, android. From desktop browser working fine.

<a-camera id="default_angle" camera  position="0 0 0" look-controls  wasd-controls>
<a-cursor>
 <!-- by default click should be not expected on hover object (fuse) -->
</a-cursor>
</a-camera>
...
<a-box id="motor" color="red" position="0 0 -5"></a-box>
<!-- on hover to this object from mobile fuse should not appear -->
...
  var motor = document.querySelector('#motor');
  motor.addEventListener('click', function (evt) {
   alert('clicked');  
  });

Please checkout this codepen https://codepen.io/sevenspring/pen/XWWzNvK

Here may be thought, that clicks produced by touch (tap on mobile screen) while cursor is hovered on object.

but you may check this example with gyro. https://parent.glitch.me in vr mode we can hover cursor on button "play/pause" by gyroscop moving, it still will produce clicks. https://glitch.com/edit/#!/join/d1afa869-dea2-47ec-9904-e851e451d832

2

2 Answers

1
votes

Answer from Dan S. is correct. When we use without attribute "cursor" , fusing event is not fired, as it is expected by default

0
votes

There are actually a number of issues here.

One issue is that the CodePen demo is using <a-cursor fuse="false" cursor></a-cursor>. This is essentially two cursors as you're adding a second one as a component via cursor that hasn't been configured.

Another issue is that cursor fuses by default on mobile if not explicitly set to cursor="fuse: false;"

Another issue is that you're listening for the click event, which is capturing the click when you mouseup after hovering over the entity.

I believe fuse was designed to allow for click without clicking, but while also allowing users to click if they have the ability.

If you want to test when something is fusing exclusively, you may want to try listening for the fusing event rather than click.

<a-cursor fuse="false"><a-cursor>

Or

<a-entity cursor="fuse: false;">
  <!-- you will need to provide your own cursor geometry -->
<a-entity>

Then listen for fusing:

this.el.addEventListener('fusing', function (e) {
 console.log(e);
});

I hope this helps.