Avoiding drag events in hammer.js until the previous event is finished

I've been working on a basic photo gallery that switches images during a drag event. However, I'm encountering an issue with the iOS7 browser where the drag event gets triggered multiple times when dragging left or right. I attempted to use a global variable to track if the previous event had not ended, but I couldn't get it to work. I also experimented with some options from hammer.js, but had no success. Do you have any suggestions for resolving this problem?

    $picWrapper.hammer({}).on("dragright", function(event) {
        event.preventDefault();
        PhotoGallery.Browse.next();
    }).on("dragleft", function(event){
        event.preventDefault();
        PhotoGallery.Browse.prev();
    });

Answer №1

Consider utilizing the swiperight and swipeleft events, along with event.gesture.preventDefault();

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

There was an unexpected error encountered while trying to use Jade

I encountered an error in my jade template: Error: E:\Do\hello_express\node_notes\views\simple.jade:6 4| meta(charset="utf-8") 5| meta(name="viewport",content="width=device-width,initial-scale=1,maximum-scal ...

The model `user` does not have a primary key attribute specified. It is required for all models to have a primary key attribute defined

I have defined a waterline model below: var Waterline = require('Waterline'); var bcrypt = require('bcrypt'); var User = Waterline.Collection.extend({ identity: 'user', datastore: 'myMongo', autoPK: false, attribut ...

Error: Although precheck is successful, the Chrome API Runtime has exceeded the QUOTA_BYTES_PER_ITEM quota

I keep receiving a QUOTA_BYTES_PER_ITEM error when attempting to store an object, even though my size precheck shows that it should be under the quota. I must be missing something simple here (is this method correct for checking object size?). I've al ...

Utilizing an external type definition in JSDoc @typedef

I'm encountering an issue with reducing redundancy when defining my imported types. I am trying to streamline the process, but unfortunately I am running into errors. /** @typedef {import("../types/util")} util @typedef {util.mapBehaviors} m ...

Sending POST parameters via Jquery POST from a Java Servlet to Javascript

My JavaScript code initiates a POST request on my Servlet. $.post("RecipeServlet", { r_id: r_id, }, function(data, status){ var foo = data.foo; var bar = data.bar; }); Now, the Servlet is expected to work with the received r_id and then send ...

Manipulating variables in the main controller scope from a function in a transcluded directive scope using AngularJS

How can parent controller scope variables be updated from a transcluded directive scope's function? I have a situation where I am including directives within another directive using transclusion. Here is an example of how it is set up: <my-table& ...

Updating the Document Object Model

React re-renders only when there is a change in state. However, it may seem like the changes made directly to the real DOM reflect instantly. This might raise questions as to what triggers the re-render when the state remains unchanged. import React from ...

Extract data from axios and display it in a Vue template

Having trouble displaying a value inside a div tag in my nuxt app. An error message keeps popping up saying "Cannot read property 'free_funds' of undefined. Still getting the hang of Axios and Nuxt. Could it be that Bootstrap requires JQuery to ...

Leveraging react props with the .map method

Imagine having this render function in one of your components. You've passed a changeTid prop function from the parent element. Parent Component: <RequestsList data={this.state.data} changeTid={this.changeTid} /> Child Component: (Using ES6 ...

Tips for preventing useEffect from triggering a route?

Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...

Error: Unable to access the 'name' property of an undefined value. Despite my efforts, I am unable to determine the root cause of this issue. My technology stack includes mysql for the database, nodejs for the backend,

Can someone help me with a TypeError: Cannot read property 'name' of undefined error I'm encountering while trying to add new users to a MySql database using Node.js and EJS as the view engine? I've been unable to identify the cause of ...

In Typescript, we can streamline this code by assigning a default value of `true` to `this.active` if `data.active

I am curious if there is a better way to write the statement mentioned in the title. Could it be improved with this.active = data.active || true? ...

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

Finding the variable with the highest value using AngularJS

I have a variety of variables with different values assigned to them, such as: Weight_gain = 0.01 Weather_gain = 0.02 and many more like these. My goal is to determine the variable name with the highest assigned value. When I attempt this using code, it ...

Steps for returning a res.send(req.body) upon sending back to a function

I'm currently working on sending the req.body from a POST request route back to the executing function for further processing. The structure of req.body is as follows: { username: 'aa', password: 'ss' } After making the post requ ...

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Using VS Code Intellisense can greatly enhance productivity when working with internal project files, providing helpful autocompletion features and utilizing written JSDoc comments. However, my current projects involve custom JavaScript libraries stored i ...

Display the contents of a JSON array in an HTML format

I have designed an exercise that requires me to display the cities corresponding to each department based on a JSON file. Currently, I am able to display the departments in their respective selections, but I am struggling to only show the cities that corre ...

A guide on handling POST response body parsing in NodeJS

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: true})); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.post("/", function(r ...

Error in Javascript programming | tracking progress bar

After stumbling upon this code snippet at this link, I was eager to delve deeper into the world of JavaScript and jQuery. However, upon implementing these codes, I encountered a perplexing issue. The progress bar and continue buttons seem to be non-funct ...

How to utilize Vue method for accessing DOM elements

I'm working on a container with various elements like h1, p, etc. The container has a background and I'm trying to create a method to move it based on mouse coordinates. However, I'm facing an issue where the e.target is showing me ele ...