Deactivate the ability to hold a button, but still permit clicking in HTML for mobile

Question

Deactivate the ability to hold a button, but still permit clicking in HTML for mobile

I am currently developing a progressive web app for mobile devices. One feature I have implemented is the ability for users to long-press a button with their finger, triggering a popup menu that includes options like "copy link address," "copy text," and "share link."

My issue arises when trying to disable this popup functionality without compromising the button's click function. The button is intended to redirect users to a different site.

Here is the HTML code for the button:

<a class="Button-one" title="Relevant Title" href="HTML/test.html">BTN-1</a>

While I could easily use CSS to apply pointer-events: none;, doing so would negate the primary purpose of the button.

javascript html css progressive-web-apps

Answer 1

Answer №1

If you want to remove the context menu that pops up on mobile devices when a button is held down, you can utilize the contextmenu event in JavaScript. By using this event, you can intercept the moment before the context menu appears and prevent it from showing by executing the preventDefault method on the event object.

document.getElementById("my-button").addEventListener("contextmenu", function(event) {
  event.preventDefault();
});

document.getElementById("my-button").addEventListener("click", function() {
  // Add your click handling code here
});

Answer 2

If you want to remove the context menu that pops up on mobile devices when a button is held down, you can utilize the contextmenu event in JavaScript. By using this event, you can intercept the moment before the context menu appears and prevent it from showing by executing the preventDefault method on the event object.

document.getElementById("my-button").addEventListener("contextmenu", function(event) {
  event.preventDefault();
});

document.getElementById("my-button").addEventListener("click", function() {
  // Add your click handling code here
});

Deactivate the ability to hold a button, but still permit clicking in HTML for mobile

Answer №1

Similar questions

Using a variable with the :contains selector

What is the method to assign an initial value to React.createRef()?

Reactjs: When components are reused, conflicts may arise in UI changes

Avoid removing content when using bootstrap popover

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

What is the purpose of including a function in an AngularJS dependency array?

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

Link embedded within a list item

What is the best method for saving HTML form data into a Node JS variable?

Parsing HTML files with Perl to extract XML data

Exploring Highcharts Pie Chart with AJAX for Real-time Data Updates

Tips for automatically updating the time in a React application while utilizing the 'date-fns' library

Changes in tabs are discarded when switching between them within Material UI Tabs

Creating a hierarchical JSON structure using a database query in JavaScript

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

I want to create a form with two dropdown menus placed side by side within a parent DIV, and I want them to collectively occupy the entire width using Bootstrap

What are the steps to adjust image size using CSS in an email signature?

Count in JavaScript that picks up where it left off

There seems to be a syntax error in the AngularJS/Bootstrap code, with an unrecognized expression

Exploring Vuetify Labs: leveraging slots for custom icons in VDataTable