Aurelia `click` 要求事件目标与元素相同的属性

Question

我知道 click.trigger 以及 click.delegate 工作得很好。但是，如果我想分配一个 click 事件，该事件仅在单击具有该属性的确切元素时触发，该怎么办？

如果是“正常”JS，我可能会做这样的事情:

el.addEventListener('click', function (e) {
    if (e.target === el) {
        // continue...
    }
    else {
        // el wasn't clicked directly
    }
});

是否已经有这样的属性，或者我需要自己创建一个？如果是这样，我希望它与其他类似，例如 click.target="someMethod()"。我怎样才能做到这一点？

编辑:我尝试过这个不起作用，因为回调函数的 this 指向自定义属性类 - 而不是使用属性类的元素；

import { inject } from 'aurelia-framework';

@inject(Element)
export class ClickTargetCustomAttribute {
    constructor (element) {
        this.element = element;

        this.handleClick = e => {
            console.log('Handling click...');

            if (e.target === this.element && typeof this.value === 'function') {
                console.log('Target and el are same and value is function :D');

                this.value(e);
            }
            else {
                console.log('Target and el are NOT same :/');
            }
        };
    }

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

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

我这样使用它:

<div click-target.bind="toggleOpen">
    ....other stuff...
</div>

(在此模板的 viewModel 中，从自定义属性调用时，toggleOpen() 方法的 this 是 ClickTargetCustomAttribute...)

我还希望 click-target.bind="functionName" 可以改为 click.target="functionName()" 就像原生的一样.

Answer 1

只需使用像click.delegate="toggleOpen($event)"这样的东西。 $event是触发事件，所以可以在toggleOpen中处理它

toggleOpen(event) {
    // check event.target here
}

您还可以将模板上下文中可用的任何其他值传递给 toggleOpen。