Prevent longPress behavior on smartphones using JavaScript

During this time, I developed several new web applications. However, I encountered a major issue with drag and drop functionality. I created a file manager using JavaScript, but when attempting to use drag and drop on mobile devices (such as smartphones, tablets with Android or iOS), the device displays the long press menu instead (e.g., when pressing on a folder icon) for copying URLs or images.

Is there any way in JavaScript to disable the long press action on mobile devices? Please note that loading images via CSS is not a viable solution for me.

javascriptandroidiosjquery-mobileweb-applications

Answer №1

-webkit-touch-callout: none; /* disable callout for image, etc when tap and hold */
    -webkit-user-select: none; /* prevent copying and pasting, change to 'text' if needed */

Answer №2

Ensure the value of navigator.userAgent is checked and compared against android|iphone|ipad, etc. In your JavaScript code, implement the following:

function initialize() {
  detectLongPress(document.getElementById('element'));
}

function detectLongPress(node) {
  node.ontouchstart = voidEvent;
  node.ontouchend = voidEvent;
  node.ontouchcancel = voidEvent;
  node.ontouchmove = voidEvent;
}

function voidEvent(event) {
  var e = event || window.event;
  e.preventDefault && e.preventDefault();
  e.stopPropagation && e.stopPropagation();
  e.cancelBubble = true;
  e.returnValue = false;
  return false;
}

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

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Exploring the Concept I have a unique idea to develop a landing page with a form that captures visitors' email addresses in a Google Sheet. After discovering a helpful post containing a Google App script for this purpose, I followed the guidelines o ...

javascriptjqueryajaxgoogle-apps-scriptcors

When clients format datetime, the default date value is sent on the form post

I'm attempting to utilize this particular example in order to correctly implement datetime formatting In my view model, I have a property for datetime public class MyViewModel { [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0 ...

javascriptjquery.netasp.net-mvc

ngMaterial flex layout not functioning properly

I can't seem to figure out why ngMaterial is not laying out my simple hello world app in a row. Despite checking the console for errors, I still can't see what I am doing wrong. I expected the content below to be displayed horizontally instead of ...

javascriptangularjsflexbox

Troubleshooting: The issue of Vue JS not successfully navigating between web

After countless attempts, I am still struggling to get my Firebase login function to appropriately switch the component upon signing in. I urgently need assistance with configuring my router to seamlessly transition to the next page once the sign-in proces ...

javascriptfirebasevue.jsfirebase-authentication

Received undefined response from Axios.get() request

While working with the code below, I encountered an issue. The axios get request from await axios.get('/products/api') is functioning properly and I can see the data in the console. However, for await axios.get('/users/api'), 'Unde ...

javascripthtmlnode.jsreactjsexpress

TypeScript error: Attempting to access 'Push' property of an undefined value

When attempting to add to an array in Typescript within an Ionic2 application, I encounter an error stating that the array is undefined despite having declared it. I have tried declaring it using two different methods with no success. The declarations used ...

javascriptangulartypescriptionic2

Modify a number with a check box using inline Ajax

I have an HTML structure similar to this example: <li><label class="desc"><font color="green">Want to receive emails ($<span id="price">50</span>/month)</font></label> <input type="checkbox" checked ...

javascriptajaxjquery

Having trouble determining the dimensions of a newly added element

I am using jQuery to dynamically add an image but I am unable to retrieve its dimensions (width and height). Below is the snippet of code from my HTML file: <input type="checkbox" id="RocketElement" data-id="1"> And here is the JavaScript/jQuery c ...

javascriptjqueryhtmldom

What is the process for defining default prop data in Next.js?

Currently, I am in the process of developing a React/Next app with CRUD functionality. In regards to the update form, I have included the code below which is responsible for fetching existing data and updating it via an API. However, there seems to be a ma ...

javascriptreactjsnext.js

The submission feature for the textarea in Javascript is not functioning properly

As someone who is new to frontend development, I am currently facing a challenge with debugging JavaScript code that involves making changes to the content of a textarea. Despite my efforts to debug using the browser console, I have yet to identify why it ...

javascripthtmltextarea

Guide to embedding dynamic content within a JavaScript popover

I have a webpage with a vast array of words. Each word triggers a complex database query, involving multiple table joins, when clicked. I want the query results to display in a popover upon clicking the word. Performing all queries during page generation ...

javascriptjquerydjangobootstrap-4

transforming numbers to text using ajax

Below is the AJAX code I am using to update passwords in my database table: $.ajax({ type: 'POST', url: root_url + '/services/services.php?method=updatesubpwd', data: { 'sid': ptcid, 'pwd&ap ...

phpjavascriptajax

How to modify a specific property of an array object in JavaScript

I have an array of objects that looks like this: [ { number: 1, name: "A" }, { number: 2, name: "e", }, { number: 3, name: "EE", } ] I am looking for a way to insert an object into the array at a specific position and ...

javascriptarraystypescript

iOS 7 issue: Subviews of UITableViewCell remain static when editing mode is activated

I am facing an issue with my custom UITableViewCell in a tableview. I have added subviews to each cell, but when I enable editing using the code: [tableView_ setEditing:YES animated:YES]; a red delete button appears on the left side of each cell. The ...

iosobjective-cuitableview

Node.js: Understanding the issue of a mysterious null value in JSON responses sent to clients

As a beginner in the world of Node.js and JavaScript, I have been struggling to find a solution to my problem even after extensive searching. My current challenge involves sending a JSON object to a Node.js server with an array of 2 elements (longitude an ...

javascriptjsonnode.js

What are some ways to disable text selection when working with VueJS?

Let's say I have a component that displays some text. When I click on the text at the beginning and then shift-click on another part, the text between those two points gets selected. Is there a way to prevent this behavior using only VueJS? ...

javascriptvue.jsvuejs3

A simple guide to capturing the value of a selected check box and storing it in a variable within

My HTML form contains two checkboxes as shown below: <p class="text"> <input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" /> <label for="ques11">True</label> ...

javascriptjquery

Setting up a standalone application on a local machine featuring a node.js frontend and spring boot backend

I am currently working on a web app that consists of a separate spring boot backend and a nodejs frontend. I am wondering if it is feasible to have both components running on the same bundle, essentially creating a single executable. Alternatively, do I ne ...

javascriptjavanode.jsspringspring-boot

JSON autocomplete feature for text input field

I've been struggling to implement an autocomplete textbox that utilizes a JSON file as its data source. Currently, the app is hosted on Google App Engine and the autocomplete function is based on an array of countries hardcoded into the code. However, ...

javascriptjsongoogle-app-engineautocomplete

Is it possible to dynamically adjust the number of children in an array?

As a beginner in React, I've been exploring ways to manage an array of components from a parent component. My task involves creating a site where I can dynamically add or remove names to a list. However, I'm facing a challenge in figuring out the ...

javascriptarraysreactjs