角 Ctrl 单击？答案

【问题标题】：Angular Ctrl click?角 Ctrl 单击？
【发布时间】：2015-01-26 12:34:36
【问题描述】：

当用户按下 Ctrl 点击时我如何捕捉？

我可以通过单击来实现：

<input ng-click="some_function()"/>

但我需要类似的东西：

<input ng-CTRL-click="some_nice_function()"/>

这可能吗？

【问题讨论】：

检查some_nice_function()中是否按下了CTRL键。你有 $event 参数。
@Blackhole 你能给我举个例子吗？

标签： javascript angularjs events click ctrl

【解决方案1】：

您必须创建自己的 ctrl-click 指令。为此，请导航到编辑器中的“指令”文件夹并创建一个。

你可以通过终端写来做到这一点：

ng generate directive ctrl-click

创建后，您必须按如下方式对其进行编辑：

import { 
    Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[ctrl-click]',
})

export class CtrlClickDirective implements OnInit, OnDestroy {
    private unsubscribe: any;

    // tslint:disable-next-line:no-output-rename
    @Output('ctrl-click') ctrlClickEvent = new EventEmitter();

    constructor(private readonly renderer: Renderer2, private readonly element: ElementRef) {}

    ngOnInit() {
        this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'click', event => {
            if (event.ctrlKey) {
                event.preventDefault();
                event.stopPropagation();
                // unselect accidentally selected text (browser default behaviour)
                document.getSelection().removeAllRanges();

                this.ctrlClickEvent.emit(event);
            }
        });
    }

    ngOnDestroy() {
        if (!this.unsubscribe) {
            return;
        }
        this.unsubscribe();
    }
}

如果和“spec.ts”文件有冲突，可以注释掉它的构造函数。

最后，如果app.modules.ts文件没有自动添加，则需要添加：

import { CtrlClickDirective } from './shared/directives/ctrl-click.directive';

@NgModule({
imports: [
    ...
    CtrlClickDirective
],

然后，您可以在 html 文件中使用它。

注意：您不能在同一元素上同时为 (click) 和 (ctrl-click) 添加侦听器。 (click) 事件每次都会触发。如果您需要两个事件侦听器，则需要嵌套它们，如下所示：

<a (click)="this.openSomething(params...)" style="cursor: pointer">
    <span (ctrl-click)="this.openSomethingNewTab(params...)">New Tab</span>
</a>

这应该没问题，希望对你有帮助。

【讨论】：

【解决方案2】：

HTML

<input ng-click="some_function($event)"/>

$scope.some_function = function(event){
    if (event.ctrlKey)
    {
       // logic here
    }
}

【讨论】：

另外，如果你还想考虑mac用户的Cmd+点击操作，还要检查event.metaKey。
现在有不同的方法吗？这对我不起作用。