iOS draggable elements - disable events on underlying divs

What is not a problem:

Moving or resizing a div works as expected on all platforms.

The issue appears to only affect Apple iOS and is described as follows:

When a moved div overlaps another element with an onclick event, the underlying onclick fires after the move operation is complete.

I have tried various event handling methods like stopPropagation and cancelBubble at different levels but with no success.

Another attempt was manipulating an underlying 'mobi div' to block the onclick event, but this did not resolve the issue.

I am avoiding using transform due to compatibility reasons, even though it could prevent this problem.

If anyone else has experienced this issue on iOS or knows any specific quirks related to Apple devices, please share your insights.

Please refrain from suggesting library-based solutions. I am looking for pure JavaScript approaches if there is a solution available.

I might be able to work around the issue using a timer and an 'on_ios_move' mechanism, but it doesn't feel like an elegant solution.

Thank you in advance for any suggestions.

Answer №1

Feel free to disregard this inquiry.

It appears that this issue only arises on older versions of iOS (such as 5.1).

I could have sworn I encountered the same problem when testing on iOS 7, but it seems to be resolved in versions 6.x and now 9.x.

After spending hours tirelessly reworking code, testing methods can become somewhat abstract by the end of a frustrating day.

My apologies for the mistake in the question.

I plan to share the code once I clean it up, assuming there is interest in a cross-browser move/resize solution that does not involve transform/translate or require a library.

Happy coding!

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

Displaying a JQuery notification when hovering over a link

I am having trouble getting an alert to pop up when I hover over a hyperlink using JQuery and Javascript. The hyperlink is inside an anchor within the main section of the HTML. Any assistance would be much appreciated. Here is my current code snippet: &l ...

What are the steps to transforming a regular expression into a dynamic format?

I've developed a powerful regex that locates specific text within a lengthy string without spaces. Now I'm attempting to utilize it dynamically to search for various words, but I can't seem to make it function as intended. Check out my rege ...

JavaScript interactive chart utilizing a table format

My goal is to create an engaging chart in the form of a table that informs users whether a service was operational or not on specific days of the month in a particular year. When a user clicks on a field, it should open a new URL with more detailed informa ...

Issue encountered when attempting to set a default value in Material-UI Text Field while interacting with Redux state?

Struggling to assign a defaultValue property for a Text Field using data from Redux state, but the updates are not reflecting as expected. The value is passed down as a prop from the container component to the edit component like this: render() { const ...

Testing Ajax code encounters error

Currently, I am running a code test with Jasmine and setting up a mock object for the ajax method. spyOn($,'ajax').and.callFake(function(e){ console.log("is hitting"); }) In order to test the code snippet below: $.ajax({ url: Ap ...

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

I have been tasked with printing web pages of a website that utilize jqgrid, Jquery calendar, various Jquery UI components, and background images. The server side is built with Zend Framework. Although I lack experience in web page printing, this has beco ...

Presence detected: Discord bot appears online but is missing from members list

I am embarking on the journey of creating my first Discord bot. After installing NodeJS on my computer, I used the Discord developer tools to create the app, turned it into a bot, obtained the token, selected privileges, and added the bot to my server. I ...

Using method as a filter in AngularJS: A guide to implementing custom filters

I've created a custom data type called Message: function Message(body, author, date) { this.body = body; this.author = author; this.date = date; this.stars = []; } Message.prototype.hasStars = function() { return this.stars.lengt ...

Is it possible to replicate keystrokes using Selenium in a CodeMirror text editor?

There are numerous illustrations available that demonstrate how to input text using selenium by utilizing the following code: driver.execute_script('cm.setValue("text")'); While this method works, it does not align with the standard practices o ...

Guide on extracting the date selected from a Bootstrap datepicker and displaying it in a separate div

I'm currently attempting to extract the date from a button and display it in another div. Initially, I tried using the input tag method but faced some issues. Therefore, I switched to employing the button option with an icon. My main challenge now is ...

Error: Attempting to access the property 'highest' of an undefined value resulted in a TypeError - Mute Command

Greetings to the Stackoverflow community! I find myself in a state of confusion as to why this particular function stopped working suddenly, resulting in the error highlighted in the title. Previously, the function would verify whether the user attempting ...

To ensure that checkboxes are automatically checked in AngularJS 1.5, the model should be bound to the objects without using the ng-checked

Due to various conflicts and dependencies, I have opted to use AngularJS 1.5.x instead of 1.6.x, which has led me to encounter some issues with ng-checked functionality. Within my ng-repeat loop, I am dealing with 2 objects: vm.stateList, containing all ...

Retrieve the list of all members in the Telegram group

Is there a way to retrieve all users from a Telegram group using the Telegram bot API in Node.js? While I'm familiar with the getChatAdministrators method, it seems like there isn't a specific method for getting all group members. I would apprec ...

Change when the div is shown or hidden

I'm attempting to add a transition effect when the DIV with the class .socialmenu is either shown or hidden. Below is the CSS code I've used, but it doesn't seem to be working: .socialmenu { bottom: 0; left: 0; right: 0; hei ...

Instructions for creating a JavaScript click function that iterates through all records, not just the initial record

Although I'm new to web development and still learning the basics of html, javascript, etc., I have a problem that seems quite simple. The challenge lies in understanding javascript functions, which I find particularly tough to grasp. Here's what ...

Dealing with alternating rows in a dynamic manner: tips and tricks

Exploring an example scenario: (view live demonstration) Sample HTML structure: <div class="wrapper"> <div city_id="1" class="odd">Street Name #1 in city 1</div> <div city_id="3" class="even">Street Name #2 in city 3</d ...

What is the best approach for incorporating multiple conditions in a React component?

I currently have a button labeled Description. When this button is clicked, the description is displayed. Now, I am looking to include a Read more/less option for the description. Unfortunately, using the below code, I am unable to see the button labeled ...

Problems with form functionality in React component using Material UI

Trying to set up a signup form for a web-app and encountering some issues. Using hooks in a function to render the signup page, which is routed from the login page. Currently, everything works fine when returning HTML directly from the function (signup), ...

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...