1

我最近开始帮助某人使用基于 PhoneGap (v2.2.0) 构建的移动应用程序。我们目前专注于 iOS。

他们遇到的问题之一是，有时“按钮”无法在整个可视区域上单击，这让用户感到沮丧。

  • 这些按钮基本上只是divs带有onClick事件。
  • 我发现如果我通过 Xcode 在浏览器或 iOS 6.1 模拟器中运行应用程序，整个区域都会div触发事件。onClick仅当我将应用程序加载到物理设备上时，问题才会存在。
  • 似乎有一个 15px 宽的“死区”，事件不会触发。有时这是 div 的整个右侧（最右边 15 px 左右），但有时是顶部 15 px 左右。
  • 我已经将应用程序提炼为准系统，以消除可能由其他 JS 库或 CSS 表引起的任何问题。整个示例应用程序是以下 index.html。在此示例中，100x100px div 的顶部 100x15px 不会触发事件。

编码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        var platform = '';
        var userAgent = navigator.userAgent.toLowerCase();

        if (userAgent.indexOf('android') > 0) {
            platform = 'android';
        }

        else if (userAgent.indexOf('blackberry') > 0 || userAgent.indexOf('BB10') > 0) {
            platform = 'blackberry';
        }

        else if (userAgent.indexOf('iphone') > 0 || userAgent.indexOf('ipad') > 0 || userAgent.indexOf('ipod') > 0) {
            platform = 'ios';
        }

        // Using document.write here because head.appendChild(script) takes too long in Android 4.0+
        if (platform) {
            document.write('<script charset="utf-8" src="jscripts\/cordova\/cordova-2.2.0-' + platform + '.js"><\/script>');
        }
    </script>


    <script type="text/javascript">

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            navigator.notification.alert("Cordova is working");

            document.getElementById("btnButton").addEventListener("click", fooBar, false);
        }

        function fooBar() {
            document.getElementById("btnButton").style.backgroundColor = "blue";
        }
    </script>
</head>
<body>

    <div id="btnButton" style="height:100px; width:100px; background-color: red; color:white;" onclick="navigator.notification.alert('Sorry, incorrect');"></div>

</body>
</html>

如果那里的任何人可以给我任何指示，它可以防止我拔掉我剩下的头发。我花了最后一天半的时间来解决这个问题，删除东西，谷歌搜索，我有点想法。

4

0 回答 0