Angular Ionic - The Power of Single and Double Taps

I've been working on creating a directive to intercept single tap and double tap using HammerJs, but I'm facing some issues. The current implementation doesn't work as expected, and I'm running out of ideas on how to fix it.

Here's what I tried:

  @HostListener('tap', ['$event'])
   handleTaps(event) {
     if(event.tapCount == 2) {
      this.doubleTap.emit();
      event.prevenDefault();
     } else {
       this.singleTap.emit();
       event.prevenDefault();
    }
   }

The problem I'm encountering is that it triggers both the Single Tap and Double Tap events. Does anyone have any suggestions for preventing this issue? Should I use a set timeout? Any help would be greatly appreciated. Thanks!

javascriptangulartypescriptionic-frameworkdouble

Answer №1

Based on the provided code snippet, give this a shot:

firstClicked = false;    
@HostListener('tap', ['$event'])
handleTaps(event) {
  if(!this.firstClicked){
       this.firstClicked = true;
       this.singleTap.emit();
       setTimeout(()=> {
          this.firstClicked = false;
       }, 200);
   }else{
       this.doubleTap.emit();
   }
}

Here's an Angular example that I created with similar functionality using the "click" event. I'm not entirely sure if setTimeout will work seamlessly with IONIC, so you may want to consider utilizing the native Timer API following the same logic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

javascriptjqueryhtmlajax

Tips for encoding a base64 string into formats such as PDF, doc, xls, and png using jQuery, JavaScript, and HTML5

Need help handling base64 strings received from the server to save files in multiple browsers (IE, FF, Chrome). If receiving a PDF base64 string, how can it be saved in the browser? Also, if receiving an Image or Doc base64 string, what is the process fo ...

javascriptjqueryajaxhtml

Error message in Material-UI TextField not displaying when state is updated using Object.assign technique

Currently, I am facing an issue with validating a login form and displaying errors dynamically. These errors are passed as props from the child component. The problem arises when I set the errors object using Object.assign - the errorText does not show up ...

javascriptreactjsmaterial-ui

Ensure Angular2-DatePicker starts as empty when first displayed

I have integrated the angula2-datetimepicker into my application by using the instructions from this source. Initially, I need to display an empty datepicker. Below is the code I am currently using: HTML: <angular2-date-picker [(ngModel)]="Model.Sele ...

angulardatepicker

Error in Angular 8: Could not perform 'setAttribute' on 'Element': 'Event' is an invalid attribute label

https://i.sstatic.net/FSyhf.png After pulling my project and running npm install, everything seemed fine with no compile errors. However, when I attempted to visit the URL, it just kept reloading endlessly and throwing an error that was difficult to trace ...

angularangular8angular9

Stop all file uploads using jQuery

I have integrated the jQuery File Upload plugin () into my website for image uploads. Here is my code snippet: $('#fileupload').fileupload({ url: 'server/index.php', dataType: 'json', dropZone: $('#dropzone&a ...

javascriptjqueryfile-uploadjquery-file-upload

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

Exploring a new attribute called rel="noopener", I discovered that it keeps opened windows unaware of their opener. After some experimentation, I consistently found window.opener === null, only to realize that this is now the default behavior in ...

javascripthtmlgoogle-chromesame-origin-policywindow.opener

Mapping nested values from a Typescript object to properties of a JSON object

Within the scope of a current project I am involved in, we have opted for utilizing the Angular toolset identified as formly to dynamically generate our forms. The present configuration of the form is hardcoded into a Typescript object denoted as mockForm ...

javascriptjsontypescriptobjectnested-object

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

Preloading error alert message displayed during AJAX request

When I send an ajax request with a dropdown change, the loader div is shown using "before send". However, the issue is that the loader only displays for the first time, even though the ajax functionality works all the time. If you want to check this issue ...

javascriptjqueryajax

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...

javascripthtmlcssreactjsnext.js

Navigating with Angular 6 - Utilizing Query Parameters within a designated secondary router outlet

Is it feasible to implement query parameters within a secondary named router outlet in Angular 6? An illustration of the desired URL format is localhost:4200/home(sidebar:chat?animal=dog) I aspire to set the query parameter "animal" and retrieve its valu ...

angular

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

javascriptjqueryjquery-validate

Using jasmine spy object to replace injected Renderer in shallow tests for Angular 2 components

Angular Component File 'zippy.component.ts': import { Component } from '@angular/core'; import {ZippyService} from '../services/zippy.service' import {Renderer} from '@angular/core' @Component({ selector: ...

angulartestingdependency-injectionmocking

How many times does the CatchError function in Angular 6 response interceptor get executed?

While working on my Angular project, I implemented an interceptor to intercept all requests and responses. However, I noticed that the function responsible for validating errors in the responses is being executed 7 times. Upon further investigation, I dis ...

node.jsangulartypescriptrxjs

Concern regarding response and emotional reaction triggered by a third-party package

Before pushing my component to npm and installing it, I will include my vite.config.ts and package.json files in the component, along with the package.json file of the project that will be installing it: vite.config.ts: // vite.config.js import { resolve ...

reactjstypescriptmaterial-uidependenciesvite

Sharing data among components in Angular 6

I've set up 2 components and a service as outlined below: component-interaction.service.ts @Injectable() export class ComponentInteractionService { public dataSubject = new BehaviorSubject<string>("Test"); getTestData(): Observable<an ...

angularobservableangular6behaviorsubject

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...

javascripthtmlcssangularjsjson

What is the best way to deploy a REST API utilizing an imported array of JavaScript objects?

I have been using the instructions from this helpful article to deploy a Node REST API on AWS, but I've encountered a problem. In my serverless.yml file, I have set up the configuration for the AWS REST API and DynamoDB table. plugins: - serverless ...

javascriptnode.jsamazon-web-servicesexpressserverless

node.js + typescript How can we access instances from methods?

Following a server rebuild, the compiler creates an instance in the included API controller as shown below: NewController.ts import express = require("express"); import INew = require("../interface/INew"); import New ...

node.jsangulartypescript