Disabling pointer events using `pointer-events: none` may not function as expected on mobile

As I work on developing a custom drag and drop module for Vue, I encountered an issue. In order to override the default browser Drag and Drop behavior, I have implemented logic to clone the div element that needs to be dragged on pointer down event. Subsequently, I update the X and Y coordinates of the cloned div on the pointermove event and finally transfer the value of this div to the drop location upon the pointer up event. To ensure that the pointer up event targets the element beneath the cloned (dragged) div, I utilized the CSS property pointer-events: none on the cloned div. This approach works seamlessly on desktop browsers. However, when testing on mobile devices, the event targeting consistently identifies the dragged element.

Here is the console.log output from the triggered events: logged events

javascriptcssvue.jseventspointer-events

Answer №1

Newer versions of mobile browsers now utilize the 'touch-action' CSS property instead of the previous method. For detailed information, refer to this link: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

To implement this, simply include touch-action: none; in the same element where you have already added pointer-events: none;.

In cases where your Vue component setup requires it, make sure to handle and prevent the 'touchstart' and 'touchend' events like so: 

<TargetElement>.addEventListener( 'touchstart', e => e.preventDefault )

Answer №2

In my search for information, I stumbled upon the solution within a related question: How can I determine the specific event target of a touchmove javascript event?

The element we are interested in targeting under our event is retrieved using the following code:

document.elementFromPoint(
    e.clientX,
    e.clientY
);

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

What could be causing the issue of why the null check in JavaScript isn't functioning properly

function getProperty(property) { console.log(localStorage[property]) //Displays “null” if(localStorage[property] == null) { console.log('Null check') return false; } return localStorage[property]; } The log outputs "nu ...

javascriptnull

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

Error in React 15.1 when loading an image leads to null reference issue

Recently, I encountered a peculiar error right after updating from react 0.14 to react 15.1: ReactDOMComponentTree.js:105 Uncaught TypeError: Cannot read property '__reactInternalInstance$wzdyscjjtuxtcehaa6ep6tj4i' of null It seems that an im ...

javascriptreactjs

The SVG format quickly displays new and larger datasets on line charts without any transition effects

My goal is to create a line chart with animated transitions similar to this demo, but without the dots. I am attempting to integrate this functionality into a react component where the update method can be triggered by another component, allowing the d3 op ...

javascriptreactjsd3.jscharts

What could be the reason for the component failing to update even after modifying the object's properties?

I have come across some related threads on Stack Overflow, but they only briefly mention using the spread operator. But why should we use it? In the code below, I am trying to update the firstName property of the user object, which is a state, when clicki ...

javascriptreactjsnext.js

Using GET Parameters in POST Requests with Laravel

I am currently utilizing jQuery AJAX to transmit map coordinates to a controller via POST method. I am now contemplating. If the current page is site.com/project/2 How can I effectively pass the 2 along with the POST data? Possible Solutions I Have Co ...

javascriptphpjqueryajaxlaravel

Adding a query parameter to my website causes a particular element to fail to display on the page

I'm facing a challenge in sharing my code, but since my project is open source, you can find the code here. I've noticed that when I receive a link from another site with /? at the end, it causes an issue on my website where the hero image secti ...

javascriptreactjsnext.jsurl-parameters

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

javascripthtmlcss

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

I am currently working on a small web app that mimics browsing WikiPedia by fetching raw HTML content of WikiPedia articles through its API. I then display this HTML in my app using "dangerouslySetInnerHTML". I am faced with the challenge of enabling a us ...

javascripthtmlreactjsdom

Is the params object sorted by $http in AngularJS?

Currently, I am in the process of writing unit tests for my AngularJS application. In order to perform these tests, I am utilizing the $httpBackend to mock the $http request internally. During the testing phase, I make use of $httpBackend.expectGET to ens ...

javascriptangularjsrestunit-testinghttp

Tips for attaching to a library function (such as Golden Layout) and invoking extra functionalities

I am currently utilizing a library named Golden Layout that includes a function called destroy, which closes all application windows on window close or refresh. My requirement is to enhance the functionality of the destroy function by also removing all lo ...

javascriptjqueryangularprototypegolden-layout

Can the ternary operator be utilized in CSS styling?

The situation is as follows: $scope.toggleSlider = function() { $('.sliderButton').css('left','0') ? $('.sliderButton').css('left', '173px') : $('.sliderButton').css('left ...

javascriptjquerycss

The art of organizing information: Tables and data management

Looking for a solution with a table: <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Trying to format the cells to display as: 1 2 3 4 ...

htmlcss

Issue when making a call to a web service using TypeScript

I've implemented the following TypeScript code: /// <reference path="jquery.d.ts" /> interface INotificationService { serviceUrl: string; getNotifications(onNotificationReceived: (notifications: string) => any): void; } module GRCcon ...

javascriptjqueryajaxtypescript

Unable to access the uploaded file on the server

Scenario : When a user uploads an image and clicks on the "save" button, I successfully save the image on the server with 777 permission granted to the folder... https://i.sstatic.net/gcIYk.png Problem : However, when I try to open the image, it does n ...

javascriptphpjqueryimagefile-upload

Mapping drop-downs based on the length of a JSON array

Looking to generate dropdowns in a React Native mobile application based on the length of values in an API JSON array. Here's an example of the desired output: eg:- Choice 1 (Label of the Drop Down) -Sub Choice 1 . (Value Data) ...

javascriptdrop-down-menureact-native

The error message "MediaMetadata is not defined as no-undef and cannot be used as a constructor" appeared when trying to use MediaMetadata

I have successfully implemented a playlist player using howler.js in vuejs. Now, I am looking to enhance it by integrating the MediaMetadata API. While the MediaSession API is functioning well with controls like notification bar, keyboard controls, and rem ...

javascriptvue.jswebapihowler.jsmediasession

Utilize jQuery to find elements based on a specific attribute containing a certain value

I need help targeting specific attributes in links to append classes based on the file extension. My page displays various types of files, from images to .ppt files. I am using ASP.NET MVC and jQuery for this project. <a class="screenshot" title="" fil ...

jqueryhtmlcsssearchattr

Executing a POST request with AJAX in jQuery to communicate across different domains and fetching XML data as

Is it possible to send an AJAX request using the POST method and receive XML as a response text? If so, please provide me with the steps to achieve this. For example: url : "http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate" data ...

javascriptjqueryajaxjquery-events

Netlify not rendering Nuxt open graph meta tags as expected

Lately, I have encountered an issue with my portfolio site. In March, when attempting to post a new blog and preview its link, I noticed that the meta tags were pulling data from the nuxt.config.js file instead of the individual pages or articles. Below i ...

vue.jsnuxt.jsmetadataserver-side-renderingnetlify