The window.addEventListener function is failing to work properly on mobile devices

Question

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's not working on mobile phones.

<script>
window.addEventListener('mouseup', function(event){
    var box = document.getElementById('narvbar_menu');
    if (event.target != box && event.target.parentNode != box){
        box.style.display="none";
        document.getElementById("close_menu").style.display="none";
    }
});
</script>

Thanks for your help!

javascript jquery css responsive-design menu

Answer 1

Answer №1

This is due to the fact that the event "mouseup" does not trigger on mobile devices. To address this, also include an event listener for "touchend":

UPDATE: The code below will add event listeners for both "mouseup" and "touchend" to the window.

<script>
    ["mouseup", "touchend"].forEach(function(e) {
        window.addEventListener(e, function(event){
            var box = document.getElementById('narvbar_menu');
            if (event.target != box && event.target.parentNode != box){
                box.style.display="none";
                document.getElementById("close_menu").style.display="none";
            }
        });
    })
</script>

If you prefer not to listen for multiple events, using "click" should suffice for both mobile and desktop users:

window.addEventListener("click", function(event) { ... }

Answer 2

This is due to the fact that the event "mouseup" does not trigger on mobile devices. To address this, also include an event listener for "touchend":

UPDATE: The code below will add event listeners for both "mouseup" and "touchend" to the window.

<script>
    ["mouseup", "touchend"].forEach(function(e) {
        window.addEventListener(e, function(event){
            var box = document.getElementById('narvbar_menu');
            if (event.target != box && event.target.parentNode != box){
                box.style.display="none";
                document.getElementById("close_menu").style.display="none";
            }
        });
    })
</script>

If you prefer not to listen for multiple events, using "click" should suffice for both mobile and desktop users:

window.addEventListener("click", function(event) { ... }

The window.addEventListener function is failing to work properly on mobile devices

Answer №1

Similar questions

Creating a Multi-Step Checkout System for a WooCommerce Store

Using CSS3 easing on Mobile Safari can help create smooth transitions

How can I simulate the response of a VueX action using Vue-test-utils?

Troubleshooting Issue with JQuery Date Picker: Date Not Valid

The Vue.js checkbox linked to a v-model with a value set to false is currently marked as

What is the best method to make the first input field the focus in BootStrap?

Improving the efficiency of JSON data retrieval in JavaScript

Rails: Unable to manipulate the value of text_field using jquery

Can javascript be used to swap out the folder in my URL?

Testing a React component using the `ua-parser-js` plugin with Jest and React Testing Library

Transforming Image Annotation from Angular 1 to Angular 4: Overcoming Conversion Challenges and Comparing Equivalents from 1.x to 4

Ways to emphasize the contrast between two texts using CSS

Installing a package from a private repository using a different package name with npm

The element in TS 7023 is implicitly assigned an 'any' type due to the fact that an expression of type 'any' is not valid for indexing in type '{}'

Is ngSwitch in Angular causing the label element to disappear?

Tips for clearing all content within a React Material UI table

I am having difficulty with my JavaScript code not being able to interpret the JSON output from my PHP code. Can anyone help me troubleshoot

Altering the appearance of an input field upon submission

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

Converting CSS properties to MaterialUI Styles in ReactJS: A step-by-step guide