# How to click html element inside mesh

**URL:** <https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236>\
**Category:** Questions\
**Tags:** css2dobject, css2drenderer, clickevent, mesh, html\
**Created:** [May 31, 2023, 5:59am UTC](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236 "2023-05-31T05:59:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rocky\_scube](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocky_scube/32/35361_2.png) [@rocky\_scube](https://discourse.threejs.org/u/rocky_scube)\
**Post date:** [May 31, 2023, 5:59am UTC](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236/1 "2023-05-31T05:59:52Z")

</div>

Hi folks,

I’ve a 360 image which I’m plotting inside sphere and in that mesh I’m rendering css2DObject using css2DRenderer and I’m using Raycaster to get the array of objects, but Raycaster is not detecting my css2DObject and I’m trying to addEventListener on the div but it is not getting triggered.

here is my code:

```javascript
 const p1 = document.createElement("p");
    p1.className = "tooltip";
    p1.textContent = data[0].links[1].value;
    const div1 = document.createElement("div");
    div1.appendChild(p1);
   // this is not working.
    div1.addEventListener("click", (event) => {
      console.log("clicked!");
    });
    const cPointLabel1 = new CSS2DObject(div1);

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 31, 2023, 6:34am UTC](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236/2 "2023-05-31T06:34:00Z")

</div>

make sure that the css is in front of the canvas element and can receive events. for this to work both the canvas and the html overlay are both position:absolute and usually share a parent, this is from where the canvas should fetch events from.

and yes, you would use dom events, not raycasting.

---

<div class="post-metadata">

**Author:** ![rocky\_scube](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rocky_scube/32/35361_2.png) [@rocky\_scube](https://discourse.threejs.org/u/rocky_scube)\
**Post date:** [June 6, 2023, 1:25pm UTC](https://discourse.threejs.org/t/how-to-click-html-element-inside-mesh/52236/3 "2023-06-06T13:25:27Z")

</div>

The issue was, in CSSRenderer I was setting

```javascript
labelRenderer.domElement.style.pointerEvents="none"

```

after adding this line it worked!

```javascript
div1.style.pointerEvents = "stroke"

```
