Pass event through to Aurelia custom element

Question

I have a Call To Action (CTA) which has a ripple effect, provided by a custom element called click-ripple , similar to Google Material Design. The custom element called click-ripple has a rule in the CSS to prevent this element from being clickable:

pointer-events: none;

If I do not add this rule, the element will be on top of its parent and it will not link the user through to the correct page or it will not perform the right action. Is there a way to feed an event from the parent through to one of its children without too much hassle?

EDIT

Let's say there is a button made up of a anchor-tag on the page. The markup of that anchor tag would look like this:

<template>
    <a href="https://www.google.com">
        <click-ripple></click-ripple>
    </a>
</template>

My question is: what is an efficient way to feed a click action from the anchor tag forward to the click-ripple element?

Answer 1

The answer is to add an event listener to the parent of the current element. Looking it up in the W3 specification I came to the conclusion that I need to use element.parentElement .

clickripple.js

//Shortened for everyone's sanity
export class ClickRipple {
    constructor(CssAnimator, Element) {
        this.animator = animator;
        this.element = element;
    }

    attached() {
        this.element.parentElement.addEventListener("click", (event) => {
            this.playAnimation(event);
        });
    }

    playAnimation(event) {
        //Math based on event
        //Animation with Aurelia's CssAnimator
    }
}

Answer 2

A common way of adding behavior (such as a click ripple) to an element is to use a custom attribute: <parent click-ripple></parent> .

Otherwise here's how you could pass the events to an arbitrary element:

click-through-custom-attribute.js

import {inject} from 'aurelia-framework';

@inject(Element)
export class ClickThroughCustomAttribute {
  constructor(element) {
    this.element = element;
    this.handler = event => this.value.dispatchEvent(event);
  }

  attached() {
    this.element.addEventListener('click', this.handler);
  }

  detached() {
    this.element.removeEventListener('click', this.handler);
  }
}

<require from="click-through-custom-attribute"></require>

<button ref="button1>I'm Behind</button>
<button click-through.bind="button1">I'm In Front</button>

If you know that the element you want to pass the click to is always going to be the parent element you could do something like this inside of your click-ripple custom element:

import {inject} from 'aurelia-framework';

@inject(Element)
export class ClickRipple {
  constructor(element) {
    this.element = element;
    this.handler = event => this.element.parentElement.dispatchEvent(event);
  }

  attached() {
    this.element.addEventListener('click', this.handler);

    ... add click ripple behavior ...
  }

  detached() {
    ... remove click ripple behavior ...

    this.element.removeEventListener('click', this.handler);
  }
}