Ecommerce Shopify WordPress Discussion

Eventlistener not working for iPhone only, works for everything else

I know this question has been asked many times before but I feel that this is a unique bug. I have event listeners that display extra info when clicked or pressed. The functionality works on PC (Chrome), iPad (Safari) but doesn't work on iPhone (I have something similar on another page which works but the listener is attached to an image (tried that here too)). I have used click, touch, touchup etc etc but still nothing. Here is my code: <div class="sub subOne"><h4>Description</h4><img src="{{ "chevron-black-closed.svg" | asset_url }}" style="width:20px;height:20px;"></div> <div class="hidden info subOneinfo ">{{ product.description }}</div> const subOne = document.querySelector('.subOne'); const subOneinfo = document.querySelector('.subOneinfo'); const sub2 = document.querySelector('.sub2'); const sub2info = document.querySelector('.sub2info'); const sub3 = document.querySelector('.sub3'); const sub3info = document.querySelector('.sub3info'); const sub4 = document.querySelector('.sub4'); const sub4info = document.querySelector('.sub4info'); const temp = document.querySelector(".temp") temp.addEventListener("touchstart", () => subOneinfo.classList.remove("hidden")) let open = false console.log("HI") function handleInteraction(evt) { evt.preventDefault() if(!open) { open = subOneinfo subOneinfo.classList.remove("hidden") } else if (open == subOneinfo) { open.classList.add("hidden") open = false {% comment %} sub1info.classList.remove("hidden") {% endcomment %} } else { open.classList.add("hidden") open = subOneinfo subOneinfo.classList.remove("hidden") } } subOne.addEventListener('touchmove', handleInteraction) subOne.addEventListener('click', handleInteraction)
It seems like you are trying to show and hide information when an element is clicked or touched. The code you provided looks generally fine, but there are a few things you might want to check or modify: Mobile Safari Click Delay: On some mobile browsers, including Safari on iOS, there is a delay between the user tapping an element and the firing of the click event. This delay is there to differentiate between a tap and a double-tap gesture. To handle this, you can use the touchend event instead of click for better responsiveness. javascript Copy code subOne.addEventListener('touchend', handleInteraction); Event Listener on 'temp' Element: You have an event listener on an element with the class 'temp', but it's not clear from your code where this element is and how it relates to the rest of the functionality. Ensure that it doesn't interfere with the other event listeners. Console Logging: Check the console for any error messages or unexpected behavior. You already have a console.log("HI"), which is a good start. You might want to add more logs to trace the flow of your code and see if there are any unexpected conditions. CSS Styling: Make sure that your CSS is correctly handling the visibility of the .hidden class and that there are no conflicting styles affecting the visibility of your elements. Viewport Meta Tag: Ensure that your HTML document includes the viewport meta tag to ensure proper rendering on mobile devices. html Copy code <meta name="viewport" content="width=device-width, initial-scale=1.0"> After making these checks, you should be able to identify the issue or provide more information for further assistance.

December 28, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.