Question

我有一个具有涟漪效果的号召性用语（CTA），由名为click-ripple的自定义元素提供，类似于Google Material Design。名为click-ripple的自定义元素在CSS中有一条规则，可防止此元素被点击：

pointer-events: none;

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

修改

我们说在页面上有一个由锚标签组成的按钮。该锚标记的标记如下所示：

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

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

Answer 1

答案是将事件监听器添加到当前元素的父级。在W3规范中查阅，我得出的结论是我需要使用pInteger。

<强> clickripple.js

element.parentElement

Answer 2

向元素添加行为（例如点击涟漪）的常用方法是使用自定义属性：DataTable。

否则，您可以将事件传递给任意元素：

点击通定制attribute.js

<parent click-ripple></parent>

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); } }

如果您知道要传递点击的元素始终是父元素，您可以在click-ripple自定义元素中执行类似的操作：

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

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

2 个答案: