Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front.

In this case, there are 24 images of an object, each taken at a 15 degree angle difference for smooth rotation effect. While it works well with a mouse on all browsers, using a touchscreen on Microsoft Edge presents issues.

The problem in Edge is swiping triggers the "go back to the previous page" function instead of rotating the object smoothly. In Chrome, I could easily fix this with a simple JavaScript code snippet:

$(".reel-holder").bind('touchstart', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Another challenge with swiping in Edge is that the rotation occurs picture by picture without following the finger movement on the touchscreen.

How can I address these problems using JavaScript/jQuery?

iS THIS EGG

Answer №1

To stop Edge from handling gestures, you can utilize the CSS property touch-action. By setting touch-action to none on specific elements, you can prevent Edge from interfering with those gestures. Another option is to set touch-action to none on a shared parent element, or even on the body itself if you want to block all Edge gestures.

If your goal is only to disable swiping back to the previous page in Edge while allowing other gestures, you can specify touch-action as pan-right pan-y pinch-zoom.

Here's an example:

.reel-holder {
    touch-action: none;
}

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

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

Adjust: Return scale to default

By applying transform: rotate(-2deg); to a section, I have created an effect where the section rotates slightly. Additionally, when the user hovers over the same section, it increases in size due to transform: scale(1.1);. However, on one specific page of ...

Is there a way to simulate a click event (on a file type input) within a promise?

I've been struggling with this issue for a long time and have not been able to find a solution. The problem arises when attempting to trigger a click event on a file input type from within a promise. When I directly trigger the event inside the promis ...

Is it possible to utilize dynamic imports in conjunction with a for loop in Next.js?

I often use dynamic import to bring in multiple components efficiently. Is it feasible to use a 'for' loop for this purpose? import dynamic from "next/dynamic"; let Dynamic = []; for (let i = 1; i < 80; i++) { const DynamicComponent = d ...

Using jQuery Ajax to Retrieve Inner Text from Elements

Looking for a solution with PHP file output like this: <div id="title">Add Us On Myspace!</div><img id="image" src="http://i39.tinypic.com/67jybs.png" alt="Add Us On Myspace!" /> The code to retrieve and display this is as follows... $ ...

Trouble with linkage in jQuery for AJAX requests in an external .js document

My asp.net application has a master file that includes the jquery.js file. On another page that uses this master page, I have my own jquery code. I attempted to move this code to an external file and then include it in my .aspx file. While most functions ...

The Process of Developing Applications

As a newcomer to web development, I have a solid understanding of HTML and CSS, and am learning JavaScript. When considering creating a web app, would it be better for me to focus on writing the functionality in JavaScript first before integrating it int ...

The process of obtaining points through accurate responses using form inputs

My task is to create a unique quiz consisting of 10 questions. Half of the questions are multiple choice, which require radio inputs, while the other half are written answers that need text inputs. To ensure accuracy and provide a scoring system, I came ac ...

Typescript is unable to comprehend that the initial item in an array of strings is considered to be a string

Here are the functions I am working with: const transitionGroup = ( propertyName: string, durationMultiple = 1, timingFunction = 'linear', delayMultiple = 0, ): string => { // ...more logic here return [propertyName, duration, tim ...

Using Swift, Segue fails to trigger following a Facebook login

Appreciate any assistance you can provide! I'm currently working on adding Facebook login to a Swift app I'm developing, and I'm encountering some difficulties trying to navigate to another view after the login is completed. Within FBSDKLo ...

Master the Art of Image Loading in Codeigniter

Hey there, I'm completely new to Codeigniter. In the Controllers folder, I've created a file called caller.php and in the \Views directory, I've created a file named home1.php. Additionally, within the root directory, I've made an ...

React JS - Breaking down the distinction between PublicTheme and PublicTheme

In my React project, I am currently working on creating the admin dashboard and designing the UI area for user interaction. I have encountered an issue where I am unable to separate the admin theme from the PublicTheme. Even when navigating to "/admin/lo ...

Utilize jQuery to interact with a pair of dropdown menu options

In my web application, I have two identical dropdown lists that contain the same values. These dropdown lists are used for account numbers. I want to prevent users from selecting the same item from both lists. For example, if a user selects item #1 fro ...

Choose the dropdown item depending on the related text

I am currently working on a drop-down menu where each option has a value and associated text. The selected option is then displayed row by row in a table, with an edit button next to each row that allows the user to change the selection. I am trying to imp ...

Solution for tables extending beyond the navbar and footer issue

My table is extending beyond the width of both the navbar and footer. Is there a way, using HTML and CSS, to make the navbar and footer expand in width to match that of the table? Most solutions I've found focus on formatting the table instead of addr ...

Changing the value of a form input name after a $scope.$watch event is activated

In my AngularJS 1.4 project, I have a form input element where I am attempting to dynamically set the name attribute. <input type="email" name="{{ctrl.name}}" class="form-control" id="email" ng-minlength="5" required> The assignment of the name att ...

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

Using Typescript/JSX to assign a class instance by reference

Looking to access an object's property by reference? See the code snippet below; class Point{ x:number; y:number; constructor(x,y) { this.x=x; this.y=y; } } const a = { first: new Point(8,9), second: new Point(10,12) }; let someBoo ...

The container stays vacant as the bootstrap modal gracefully appears with a fading effect

I am trying to implement a basic bootstrap modal into my project, but I am encountering some issues with the code. When I click the "Launch demo" button, the modal fades in as expected, yet the container supposed to contain the ".modal-header", ".modal-bo ...

Utilizing turbolinks enables the page to be reloaded upon form submission

Currently, I have implemented turbolinks in my Rails application. However, every time I submit a form, the page reloads and the form is submitted. Is there a way to prevent the page from reloading and also submit the form seamlessly? ...