鼠标无法在Android网页上工作

Mouseout not working on Android webpage

本文关键字：网页 工作 Android 鼠标      更新时间：2023-09-26

我正在尝试重写我的网页，以便在智能手机上正确显示。在我的测试中，当鼠标移出下拉菜单的div时，我无法使下拉菜单消失。以下是我的代码：

   <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>

在我的桌面上测试时，它可以正常工作，但在我的Android手机上测试中，下拉菜单会出现，但即使链接确实有效，再多的点击也不会让它消失。那么，有没有一种方法可以让下拉菜单消失在类似于桌面的智能手机上？我不是在安卓系统中编码，我只是在智能手机上显示网页。

由于没有鼠标，因此移动设备没有鼠标输出。

建议使用移动框架，或者至少阅读可用的事件。

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

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

使用模糊效果如何？

这是一个使用模糊的演示。我在安卓设备上测试了这个。

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（无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;
}

请参阅jsFiddle演示。。。

相关文章：