Jquery .focusout not working on mobile(slicknav)

Question

Slicknav only closes if you click the menu button again.

so I did this bit of code to make it close when you click anywhere

$(document).ready(function() {
   //close menu on lost focus
   $('.slicknav_menu').focusout(function(event){
      $('.menu').slicknav('close');
   });  
});

This works on desktop when I make my window small to test, but on phone i have to touch an image for it to close, not if i just click anywhere, its like it only registers a click if you touch an element.

Can i use somethign else instead of focusout?

Answer 1

I would use a normal click event on the body and check if what the user clicked was inside the slicknav_menu.

$('body').click(function(event) { 
    if(!$(event.target).closest('.slicknav_menu').length) {
       $('.menu').slicknav('close');
    }        
});

Answer 2

fixed using

$(document).ready(function() {

   $('#whole-page').click(function(event) { 
      $('.menu').slicknav('close');
   });

});

I couldn't use body as the menu was in the body and the menu closed straight after opening it.