Implementing window on:Click or document.getElementById

1

How is it possible to implement window.on click functions in DoneJs ?
Whenever the user clicks on the window my pop up menu should close.

2

Hi @Chetna_Singh,

There’s a few ways you could do this. If you always need to listen to this event, you don’t need to use anything from CanJS; you can listen for click events like this:

window.addEventListener('click', function(event) {
  // event.target is the element that was clicked
});

What you might need instead is to only have the listener set up when a specific component is in your page; let’s say you have a pop-up component, then you could set up a listener like this:

import Component from "can-component";

Component.extend({
  tag: "pop-up",
  // ... view, ViewModel, etc.
  events: {
    "{window} click": function(window, event) {
      // event.target is the element that was clicked
    }
  }
});

This way, the click listener is only active when your popup is shown on the screen. It will fire for any click, so you might need to check if the element is outside your popup, something like:

    "{window} click": function(window, event) {
      // event.target is the element that was clicked
      if (this.element.contains(event.target) === false) {// Clicked element is outside of the component
        // Close the popup
      }}
    }

Here’s a JS Bin I made with some of this code: https://jsbin.com/bujapotuci/1/edit?js,console,output

Hopefully this helps, please let us know if we can answer any other questions.

3

I think you can also use connectedCallback on the VM:

ViewModel: {
  connectedCallback(){
    this.listenTo(window, "click", function(event){})
  }
}
4

thanks @chasen , I will try to implement this

5

thank you @justinbmeyer