37

How can I catch when user press Ctrl click ?

I can do it for single click using:

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

but I need something like:

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

Is that possible?

2
  • 1
    Check that the CTRL key is pressed in some_nice_function(). You've got the $event parameter for that. Commented Nov 27, 2014 at 21:13
  • @Blackhole could you show me an example? Commented Nov 27, 2014 at 21:16

2 Answers 2

75

HTML

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

JS

$scope.some_function = function(event){
    if (event.ctrlKey)
    {
       // logic here
    }
}
Sign up to request clarification or add additional context in comments.

2 Comments

Additionally, if you also want to account for mac users' Cmd+click operations, also check for event.metaKey.
Is there a different way to do this now? This is not working for me.
5

You have to create your own ctrl-click directive. To do this, navigate to your "directives" folder in your editor and create ones.

You can do it by terminal writting:

ng generate directive ctrl-click

Once created, you have to edit it like following:

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

If there is a conflict with "spec.ts" file, you can comment its constructor.

Finally, you need to add to app.modules.ts file if it has not been added automatically:

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

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

And then, you can use it in your html files.

NOTE: You can not add listeners for both (click) and (ctrl-click) on the same element. The (click) event will fire every time. If you need both event listeners, then you need to nest them, like this:

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

This should work fine, I hope I help you.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.