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

Leverage Vue's ability to inject content from one component to another is a

Using CSS properties as false values within React applications

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

Unlocking the potential: passing designated text values with Javascript

Encountering a "Connection Refused" error when attempting to test a React and Express application

Interacting with a WCF service using jQuery

What is the process for transferring information from a Microsoft Teams personal tab to a Microsoft Teams bot?

Tips for extracting JSON data from an API with identical names as values

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

AngularJS: Modifying directive according to service value update

javascript authorization for iframes

Issue with PHP form not saving data and correctly parsing output

Align the subtext to the right and center it vertically within a Bootstrap dropdown menu item

The Slack Bot is having trouble downloading files from direct messages, but it is successfully downloading them when uploaded to a channel

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

JavaScript - I have a variable trapped inside a function and I'm struggling to retrieve it

Creating a concise TypeScript declaration file for an established JavaScript library

Looking for a solution to eliminate Parsing Error: Unexpected Token when developing with React? I've already implemented ESLint and Prettier

Pair objects that possess a specific attribute

The addition and deletion of classes can sometimes lead to disruptions in the DOM