Mouseout在Android网页上不起作用

Question

I am trying to rewrite my webpages to display properly on a smartphone. In my testing I cannot get a dropdown menu to disappear when the mouse moves out of the div of the dropdown menu. Below is my code:

   <script type="text/javascript">
    function expandMenu() {
        document.getElementById("moreMenu").style.display = "block";
    }

    function hideMenu() {
        document.getElementById("moreMenu").style.display = "none";
    }

</script>

.......

  <div  class="medianfont"><a href="news/pastnews.aspx">News &nbsp; - </a><a href="email.aspx"> Email &nbsp; - </a><a href="pastedit.aspx">Editorials &nbsp; - </a>
  <span style="cursor:pointer; color:blue" onclick="expandMenu()"> More</span><br />
    <div id="moreMenu" style="display:none; margin-left:14em;" onmouseout="hideMenu()" onclick="hideMenu()">
        <a href="histart.htm">History </a><br />
        <a href="calendar.aspx">Events </a><br />
    </div>
</div>

It works ok when testing on my desktop but in testing on my Android phone, the dropdown menu will appear but no amount of clicking will make it go away even though the links do work. So is there a way to get a dropdown menu to disappear on a smartphone similar to a desktop? I am not coding in Android, I am merely displaying the webpage on a smartphone.

Answer 1

There is no mouseout for mobile devices since there is no mouse.

Suggest using a mobile framework or at least reading up on the available events.

http://api.jquerymobile.com/category/events/

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events

What about using blur?

Here is a demo using blur. I tested this on an Android device.

HTML

<div id="menu" onclick="expandMenu();" onblur="hideMenu();">Menu</div>
<div id="moreMenu" tabindex="-1" onblur="hideMenu();">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

JavaScript (No JQuery)

function expandMenu() {
    document.getElementById("moreMenu").style.display = "block";
    document.getElementById("moreMenu").focus();

}

function hideMenu() {

    document.getElementById("moreMenu").style.display = "none";
}

CSS

#moreMenu {
    width:100px;
    height:400px;
    border: 1px solid blue;
    display: none;
    outline: none;
}

#menu {
    outline: none;
    background: #e5e5e5;
    width: 100px;
}

See jsFiddle Demo...