# Onclick is not working on CSS3DObject

**URL:** <https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108>\
**Category:** Questions\
**Tags:** css3dobject, events\
**Created:** [October 23, 2021, 6:20pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108 "2021-10-23T18:20:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RSpeekenbrink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rspeekenbrink/32/21814_2.png) [@RSpeekenbrink](https://discourse.threejs.org/u/RSpeekenbrink)\
**Post date:** [October 23, 2021, 6:20pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108/1 "2021-10-23T18:20:00Z")

</div>

Hi!

When I make a CSS3DObject as follows:

```javascript
  element = document.createElement('div');
  element.innerHTML = 'Test';

  element.setAttribute('onclick', 'alert(1)');

  const object = new CSS3DObject(element);
  object.position.x = parseFloat(0);
  object.position.y = parseFloat(0);
  object.position.z = parseFloat(-150);
  object.lookAt(this.camera.position);

  this.scene.add(object);

```

Renderer:

```javascript
this.renderer = new CSS3DRenderer();
this.renderer .setSize(window.innerWidth, window.innerHeight);
this.container.appendChild(this.renderer.domElement);

renderFrame = () => {
    this.renderer.render(this.scene, this.camera);

    window.requestAnimationFrame(this.renderFrame);
 }

```

Unfortunately the onclick event doesn’t seem to work. I can see the hotspot, css hover effects work as well just not the click events. Not when I register it as event nor if I add it as attribute. Any Ideas?

I use `three/examples/jsm/controls/OrbitControls.js` as OrbitControl to look around my scene.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 23, 2021, 7:09pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108/2 "2021-10-23T19:09:28Z")

</div>

instead of

`element.setAttribute('onclick', 'alert(1)');`

try

`element.addEventListener('pointerdown', () => { alert(1) })`

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 23, 2021, 7:10pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108/3 "2021-10-23T19:10:06Z")

</div>

Yep, using pointer events should solve this issue. Live example: [https://jsfiddle.net/9tng8dp0/2/](https://jsfiddle.net/9tng8dp0/2/)

---

<div class="post-metadata">

**Author:** ![RSpeekenbrink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rspeekenbrink/32/21814_2.png) [@RSpeekenbrink](https://discourse.threejs.org/u/RSpeekenbrink)\
**Post date:** [October 23, 2021, 7:20pm UTC](https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108/4 "2021-10-23T19:20:25Z")

</div>

Thanks! Would never have thought of that, works like a charm! 🙂