Repository: AR-js-org/AR.js

Issue #66: Click events does not work with a-frame 1.x.x
Created: 2020-03-25T17:14:06Z
Do you want to request a feature or report a bug?
A bug


What is the current behavior?
Click events using cursor component of A-Frame are not working with A-Frame version 1.xx
If the current behavior is a bug, please provide the steps to reproduce.


More details can be found here: https://stackoverflow.com/questions/60562362/touch-on-ar-object-in-ar-js
Please mention other relevant information such as the browser version, Operating System and Device Name
A-Frame version 1.0.4. Worked with 0.9.2
AR.js version is not relevant, also for browser/device.
What is the expected behavior?
Click events should work as it worked with a-frame 0.9.2 and below.

Duplicate issue #182: Click event on an a-entity inside a marker isn't fired
Created: 2020-09-23T13:47:52Z
Do you want to request a feature or report a bug?

Bug



What is the current behavior?

Click event is not fired.

If the current behavior is a bug, please provide the steps to reproduce.
I have a simple code where there is a plane over barcode marker, when I click on this plane this action toggle visibility to another entity.
<!doctype HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script>
    AFRAME.registerComponent("markerhandler", {
        init: function () {
            const animatedMarker = document.querySelector("#animated-marker");
            var toggle= false;
            animatedMarker.addEventListener('click', function (ev, target) {
                console.log('click event on #animated-marker fired')
                toggle=-toggle;
                const element = document.querySelector("#show-hide-entity");
                element.setAttribute('visible',toggle);
            })
        }
    })
</script>
<a-scene embedded
         arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix;  matrixCodeType: 4x4_BCH_13_9_3;'>



    <a-marker type='barcode' value='1' emitevents="true" markerhandler>
        <a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity>
        <a-entity geometry="primitive: plane; width: 1; height: 1"
                  material="color: red;  opacity:0.7; side: double"
                  text="value: click me; align: center; wrapCount: 15"
                  position="0 0 0"
                  rotation="-90 0 0" class="clickable"
                  id="animated-marker"></a-entity>
        <a-entity geometry="primitive: plane; width: 1; height: 1"
                  material="color: blue;  opacity:0.7; side: double"
                  text="value: All it's ok; align: center; wrapCount: 15"
                  position="1 0 0"
                  rotation="-90 0 0"
                  id="show-hide-entity" visible="false"></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body
</html>

Code console.log('click event on #animated-marker fired') don't run when red plane is clicked.
Please mention other relevant information such as the browser version, Operating System and Device Name

Same as #148
Documented in stackoverflow: https://stackoverflow.com/questions/63151052/click-event-on-a-entity-in-ar-js

Used references and documentation:
How to handle click events on AR.js
Event listeners in ar.js
OnClick on model in AFrame-AR.js scene
What is the expected behavior?

When I click on this plane this action toggle visibility to another entity.

If I change to
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
all code is working fine.
If this is a feature request, what is motivation or use case for changing the behavior?

Closing comment (2021-07-20T10:07:07Z): duplicate: #66