Solution for handling pointer events in Safari iOS when they are not supported

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event

Hello! I have successfully implemented code for a long click, however, the pointer event api is not fully supported in Safari as it is still under development.

Is there a simple workaround that can be applied specifically for Safari? If not, is there another event that can be used instead? I've attempted to use 'mousedown/mouseup' but with no success.

The following code works with "touchstart/touchend" and also "pointerdown/pointerup", but unfortunately, they do not have comprehensive browser support:

    let pressTimer;
    this.myDocsums.on('touchend', () => {
      clearTimeout(pressTimer);
    }).on('touchstart', (e) => {
      let startY = window.pageYOffset;
      let docsum = $(e.currentTarget);
      let selectorInput = docsum.find('.selector-input');
      pressTimer = window.setTimeout(() => {
        let endY = window.pageYOffset;
        if (startY == endY) {
          selectorInput.trigger('click');
        }
      }, 750)
    });

Answer №1

Safari recently added support for pointer events (PC: 2019/09/19, Mobile: 2019/10/28).

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

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

Merge web address when form is sent

I'm currently working on a search application using the Django framework and the Yelp API as my backend, which is functioning properly. However, I am facing some challenges with the frontend development, specifically integrating Leaflet.js. My search ...

What is the best way to prevent an HTML form from being submitted when a user is not logged in, but still allow submission when the user is signed

One of the requirements for users of my application is to be signed in before they can submit form information. Upon clicking on the submit button, my jQuery script verifies if the user is already signed in. If the user is not signed in, an error message ...

What should the website do if none of the paths are found - direct to a 404 error page?

<Routes> {!userlog ? ( <Route path="/" element={<AuthLayout />}> <Route index element={<Login />} /> <Route path="/login" element={<Login />} /> <Route path="/sig ...

Searching for a solution on how to retrieve data server-side in the newest version of Next.js? Attempted to use getStaticProps but encountering issues with it not executing

Currently tackling a project involving Django Rest Framework with Next.js, and encountering a roadblock while trying to fetch data from the API. Data is present at the following URL: http://127.0.0.1:8000/api/campaigns, visible when accessed directly. The ...

Transfer the imageURI to a different HTML page

My mobile app, created using PhoneGap, allows users to select an image from their album. I want to pass that selected image and display it on another HTML page. Does anyone have any suggestions on how to achieve this? Below is the code snippet: selectImag ...

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this https://i.sstatic.net/BDk5C.png rather than this https://i.sstatic.net/UdXoE.png? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? cla ...

Nested data is the foundation of the Polymer framework's dom-repeat

Struggling with implementing Polymer's <dom-repeat>. Working with parent objects (folders) and child objects (contents within the folders) that are both generated from AJAX responses. The desired output should look like this: Folder child c ...

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

Retrieve the value of a related object based on the user's click

Check out this sample code on JSFiddle <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <div></div> JavaScript: function Product(name, price){ this.name = name; this. ...

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

Challenges encountered when transferring ESLint code formatting regulations to @stylistic/eslint-plugin

I've encountered issues while trying to incorporate the ESLint Stylistic plugin into my node/react/typescript project when using ESLint. ESLint has updated their code formatting rules and now suggests utilizing the ESLint Stylistic plugin for code fo ...

Managing Errors with yEnc in Node.js

Currently, I am utilizing the yEnc module in combination with Node.js. I have been grappling with the challenge of implementing error handling since the module lacks an err token. How can error handling be achieved? Outlined below is the code that I hav ...

Tips for preventing countdown from resetting when you refresh the page

I'm currently using a countdown feature on my Shopify website that is functioning well, except for one issue - whenever the page is refreshed, the countdown resets itself. Can anyone provide guidance on how to solve this problem? Thank you in advance! ...

Transformation of an Ajax array into an associative array

Currently, I am working on creating an API using Ruby on Rails and facing a challenge with sending an array through ajax. The task seems straightforward, but the issue arises when the array is received as an associative array instead of a regular one! Es ...

Angular - Async function does not resolve a rejected promise

Currently, my component utilizes an async method for handling file uploads. Here is an example: //component uploadPhotos = async (event: Event) => { const upload = await this.uploadService.uploadPhotos(event, this.files, this.urls); } The UploadSe ...

Adding custom script bundles in NextJS is a great way to enhance the functionality and

I am facing a challenge with incorporating legacy custom JavaScript files into my project. These scripts need to be bundled and linked in the _document.js file with a hash included in the filename. What is the most effective approach to achieve this? I h ...

What is the best way to compare JavaScript arrays with the same items but in a different order?

Within my product groups, each group is identified by a set of product_type_ids. I am looking for a way to match different groups based on their product_type_ids. The order of the ids may vary within the group, but as long as the sets of ids match, I cons ...

There are times when the `window.location.replace` function does not

I have implemented a Bootstrap Dropdown feature that allows users to select a language for site translation, append the URL with the selected language, and then reload the page. Initially, it works well for the first set of translations like en|es. Howeve ...

Using JavaScript regular expressions to restrict the characters allowed in an HTML text input field

I am new to Regex and just starting out with Javascript. I am attempting to require users to follow a specific pattern when typing in the textarea. The pattern should start with 'X' followed by 9 numbers. If the first character is not an 'X ...