How to handle “single click” and “double click” on the same html DOM element using typescript:Angular 2 or 4?

Question

My issue is, the methods used for both the events is getting triggered when I perform \"double click\"

For example, I need to perform specific functionality when spe

Answer 1

You can use a timeout and a boolean flag to solve this. Consider the following:

The DOM takes a few milliseconds to recognize the double click.

But it's damn sure that it recognize the double click but the first click is also recognized.

So the logic goes like this.

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        settimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

Call the method one in the click event of the element and method 2 in the click event of the element.

Answer 2

this is more clean

i found a solution with rxjs, try this

my template have

<div #divElement></div>

And i have in my component.ts

  @ViewChild('divElement') el: ElementRef;

  ngAfterViewInit(): void {
    this.handleClickAndDoubleClick();
  }

  handleClickAndDoubleClick(){
    const el = this.el.nativeElement;
    const clickEvent = fromEvent<MouseEvent>(el, 'click');
    const dblClickEvent = fromEvent<MouseEvent>(el, 'dblclick');
    const eventsMerged = merge(clickEvent, dblClickEvent).pipe(debounceTime(300));
    eventsMerged.subscribe(
      (event) => {
        if(event.type === 'click'){
          //click
        }

        //dblclick
      }
    );

Answer 3

clickCount = 0;
click() {
    this.clickCount++;
    setTimeout(() => {
        if (this.clickCount === 1) {
             // single
        } else if (this.clickCount === 2) {
            // double
        }
        this.clickCount = 0;
    }, 250)
}

Answer 4

You can the pure JavaScript call back dblclick, Or as you use in angular 2 : (dblclick)="doubleClickFunction()".

If you have both (click) and (dblclick) on the same element you should add a timeout to your click event callback to avoid it been called when user double click.

Try something like:

.html:

<button (click)="singleClick()" (dblclick)="doubleClick()">click</button>

.js:

singleClick(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        ...
      }
    }, delay);

  }

  doubleClick(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    ...
  }

Answer 5

It needs simple work-round to block single click then do double click.  Check this example 

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{title}}</h2>
        <button (click)="singleClick($event)" (dblclick)="doubleClick( $event)"> Click </button>
    </div>
  `,
})
export class App {
  title:string;
  preventSingleClick = false;
  timer: any;
  delay: Number;
  constructor() {
    this.title = `Angular (click) and (dblclick)`
  
  }
  
  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           alert('Single Click Event');
        }
      }, delay);
  }
  
  doubleClick () {
    this.preventSingleClick = true;
    clearTimeout(this.timer);
    alert('Double Click Event')
  }
}

[plunker][1]

  [1]: http://plnkr.co/edit/pbsB0zYQCEY4xrPKngrF?p=preview

Answer 6

I just created simple solution for this. Here for the template:

<button (click)="myFunction()">Click me!</button>

And here for the script:

justClicked = false;
doubleClicked = false;

myFunction() {
  if (this.justClicked === true) {
    this.doubleClicked = true;
    this.doubleClick();
  } else {
    this.justClicked = true;
    setTimeout(() => {
      this.justClicked = false;
      if (this.doubleClicked === false) {
        this.singleClick();
      }
      this.doubleClicked = false;
    }, 500);
  }
}

singleClick() {
  console.log('single');
}

doubleClick() {
  console.log('double');
}