1

私は最近、PhoneGap (v2.2.0) 上に構築されたモバイル アプリケーションで誰かを支援し始めました。現在、iOS に注力しています。

彼らが抱えている問題の 1 つは、表示可能な領域全体で「ボタン」をクリックできないことがあり、ユーザーにとってイライラすることです。

  • これらのボタンは、基本的にdivsイベントonClickが表示されているだけです。
  • Xcode を使用してブラウザーまたは iOS 6.1 エミュレーターでアプリを実行すると、の領域全体でイベントがdiv発生することがわかりました。onClickこの問題は、アプリを物理デバイスにロードしたときにのみ発生します。
  • イベントが発生しない 15px 幅の「デッド」エリアがあるようです。これは、div の右側全体 (右端の 15 ピクセル程度) である場合もありますが、上部の 15 ピクセル程度である場合もあります。
  • 他の 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>

誰かが私に何かアドバイスをくれるとしたら、残っている髪を抜くのをやめさせてくれるかもしれません. 私は最後の 1 日半をこれに費やし、物を削除し、グーグルで調べました。

4

0 に答える 0