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

我有一个号召性行为（CTA），它具有涟漪效应，由类似于Google Material Design的自定义元素click-ripple提供。所谓click-ripple自定义元件在CSS规则，以防止这种元素被点击：将事件传递给Aurelia自定义元素

pointer-events: none;

如果我不加这个规则，该元素将在其父的顶部，它不会链接用户通过正确的页面或它不会执行正确的操作。有没有一种方法可以将事件从父母一直馈送给其中一个孩子，而没有太多麻烦？

编辑

比方说，有由页面上的锚标记的按钮。锚标签的标记应该是这样的：

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

我的问题是：什么是一个有效的方式来养活从锚标记着在click-ripple元素的点击动作？

来源

2016-02-16 DevNebulae

我不明白，在所有 –

@MatthewJamesDavis见澄清编辑。 – DevNebulae

向元素添加行为（如点击涟漪）的常用方法是使用自定义属性：<parent click-ripple></parent>。

否则这里是你如何能够通过这次事件中的任意要素：

点阅定制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>

如果你知道你元素想要通过点击以始终是父元素，您可以在点击涟漪自定义元素内执行类似以下操作：

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

来源

2016-02-16 18:25:52

这是一个自定义的元素，你应该可以添加到每一个元素，它应该工作。 '' – DevNebulae

编辑答案，但向元素添加行为（例如点击涟漪）的最常见方式是使用自定义属性：<<父级点击波纹>'。 –

如何为效果添加HTML标记？ – DevNebulae

答案是将事件侦听器添加到当前元素的父级。在W3规范中查看，我得出结论，我需要使用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 
    } 
}

来源

2016-02-16 23:11:06 DevNebulae

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

回答

相关问题