Aurelia`单击'属性,要求事件目标与元素相同

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

就像使用smth一样click.delegate="toggleOpen($event)". $event是触发事件,因此您可以在toggleOpen中处理它

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

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