返回 导航

Cordova

hangge.com

Cordova - 设备菜单键、返回键、搜索键的点击响应

作者：hangge | 2017-03-12 08:10
相较于 iPhone 屏幕下方只有一个实体按键（HOME键），Android 手机屏幕下方通常有3个实体键：menu 键（菜单键）、back 键（返回键）、search 键（搜索键）。这些按键默认情况下就具有其特定功能。
当然我们也可以对其功能作修改，通过响应这些按键事件实现我们自己的业务逻辑。

1，效果图

当我们点击设备的 menu、search、back 功能键时，会弹出相应的消息提示框。

2，样例代码

<!DOCTYPE html>
<html>
    <head>
        <title>hangge.com</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //页面加载后添加各事件监听
            function onLoad() {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            //Cordova加载完毕
            function onDeviceReady() {
              //监听返回键按钮事件
              document.addEventListener("backbutton", eventBackButton, false);

              //监听菜单键按钮事件
              navigator.app.overrideButton("menubutton", true);  //监听菜单键要加这个
              document.addEventListener("menubutton", eventMenuButton, false); //菜单键

              //监听搜索键按钮事件
              document.addEventListener("searchbutton", eventSearchButton, false);
            }

            //菜单键点击响应
            function eventMenuButton() {
              alert("点击了菜单键");
            }

            //返回键点击响应
            function eventBackButton() {
              alert("点击了返回键");
            }

            //搜索键点击响应
            function eventSearchButton() {
              alert("点击了搜索键");
            }
        </script>
    </head>
    <body onload="onLoad()">
    </body>
</html>
评论

全部评论（0）

回到顶部