将事件传递到 Aurelia 自定义元素

Pass event through to Aurelia custom element

本文关键字：Aurelia 自定义 元素 事件      更新时间：2023-09-26

我有一个号召性用语(CTA(，它有一个连锁反应，由一个名为click-ripple的自定义元素提供，类似于谷歌材料设计。名为 click-ripple 的自定义元素在 CSS 中有一个规则来防止此元素可点击：

pointer-events: none;

如果我不添加此规则，该元素将位于其父元素之上，并且不会将用户链接到正确的页面，或者它不会执行正确的操作。有没有办法将事件从父级馈送到它的子级之一，而不会有太多麻烦？

编辑

假设页面上有一个由锚标签组成的按钮。该锚标记的标记如下所示：

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

我的问题是：将点击操作从锚标记转发到 click-ripple 元素的有效方法是什么？

答案是将事件侦听器添加到当前元素的父元素。在W3规范中查找它，我得出的结论是我需要使用element.parentElement。

咔嚓咔嚓.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
    }
}

向元素添加行为(例如点击波纹(的常用方法是使用自定义属性：<parent click-ripple></parent> 。

否则，以下是将事件传递给任意元素的方法：

点击通过自定义属性.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>

如果您知道要将点击传递给的元素始终是父元素，则可以在点击波纹自定义元素中执行以下操作：

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);
  }
}
相关文章：