clicked¶

clicked is a DOM event that occurs whenever the backdrop is clicked.

Remember that h-backdrop by default is placed outside the main content of the page which means that the events may not be directly reachable to any element inside the document. In order to catch them make sure to use document.addEventListener instead of this.addEventListener.

Event body¶

none

Example¶

In this example we listen to clicked event and perform an action whenever it's emitted.

useStorefront(async (storefront) => {
    document.addEventListener('clicked', () => {
        console.log('Backdrop has been clicked');
    });
});

Example¶

As stated above, the backdrop events may not reach the components inside the main content of the page.

useStorefront(async (storefront) => {
    const $productVariants = document.querySelector('product-variants');

    $productVariants.addEventListener('clicked', (event) => { // this might never fire
        console.log('Backdrop has been clicked');
    });
});