mobile version of a website click and hide

Question

I have a problem with some JavaScript: for the computer version of a website, when I hover over a button, some text appears, and when I click anywhere else on the site, the text hides.

I don't know how to construct a page for the mobile version of the same website, on which when I click on a button, text shall appear and when I click anywhere else I want the text to hide. I've tried:

if(jQuery.browser.mobile)  {
    $(".button").on("click", function()  {
        $(".text").show();
    });
    //this section doesn't work
    $("body").on("click", function()  {
        $(".text").hide();
    });
}
else  {
    //desktop code here, irrelevant
}

Typo : an `a` is missing to `class` line 4. – Sylvain Mar 30 '17 at 16:49 — Sylvain, Mar 30 '17 at 16:49

score 0 · Answer 1 · edited May 23 '17 at 12:25

There is a conflict in your code because class is part of body. So when you click class both events are called.

The information in this post will help you solve your problem:
How do I detect a click outside an element?

By using event.stopPropagation(); in your class event, you should be able to differentiate both event.
Note that this solution may raise other problems if your class element or any element contained by it handle other events. In this case, you might want to try other solution from the post I quoted.

I don't think that the fact that that your working on a mobile version is relevant.

mobile version of a website click and hide

1 Answers1