2

この問題は、少なくとも Android 4.1.2 (Mobile Chrome ではない) に含まれるストック ブラウザーと、ビルド中の cordova ベースの Android アプリの WebView コンポーネントで発生します。

ビューの上部に固定ヘッダーがあり、水平方向にスクロール可能なタブのセットが含まれるページを作成しました。このページには、基本的な DOM とインライン CSS が含まれており、各タブに添付されたクリック ハンドラーが起動しません。

<html>
...
<body>
    <div>
        <header class="navheader" style="position: fixed; z-index: 1000;">
            <h1>....</h1>
            <nav style="width: 100%; overflow: scroll; -webkit-overflow-scrolling: touch;">
                <div class="tabs">
                    <div class="tab"><a href="...">...</a></div>
                    <div class="tab"><a href="...">...</a></div>
                    <div class="tab"><a href="...">...</a></div>
                    <div class="tab"><a href="...">...</a></div>
                    <div class="tab"><a href="...">...</a></div>
                    <div class="tab"><a href="...">...</a></div>
                    ...
                </div>
            </nav>
        </header>
        <section>
            ...
        </section>
    </div>
</body>
</html>

jQuery を使用して、次のようないくつかの方法でクリック ハンドラーをアタッチしようとしました。

$('body').on('click', 'header .tab', function(event){ ... });

また

$('.tabs .tab').on('click', function(event){ ... });

「header .tabs a」、「header .tabs .tab a」、「header a」などのセレクターのバリエーションとともに。私も試しました：

$('.tabs .tab a').each(function(i) { this.onclick=function(){ ... }; });

a各タグに onclick 属性を追加します。

<div class="tab"><a href="..." onclick="alert('hi');">...</a></div>

これらはどれも機能しませんでした。

ただし、このコードを使用すると：

$('body').on('click', function(event){
    console.log("Click" + $(event.target).attr('class'));
});

クリック イベントは、「navheader」または「overflow: scroll」が設定された要素の背後にあるものを出力します。各タブ、タブ コンテナー、navelem の z-index を調整しても、これには影響しませんでした。

CSS から 'overflow: scroll' を削除すると問題が軽減され、ハンドラーを登録するためのメソッドのいずれかでイベントが発生します ('-webkit-overflow-scrolling: touch' は効果がないように見えます)。しかし、その後、水平方向にスクロールする機能が明らかに失われます。したがって、スクロール可能な内部コンテンツを持つ要素は、何らかの形でイベント バブリング階層から削除されているようです。また、Mobile Chrome やすべての iOS でも動作します。

誰かが回避策を見つけましたか?

また、webView.getSettings().setJavaScriptEnabled(true);for WebView で宣言されています。

4

1 に答える 1

0

私は本質的に自分のヒット検出を行うことになりました：

$('body').on('click', '.navheader', function(event) {
    var $nav = $('nav'), x = event.pageX || event.clientY, y = event.pageY || event.clientY;
    y -= $(window).scrollTop();
    // Because the nav bar takes up the whole width for us
    if (y > $nav[0].offsetTop && y < $nav[0].offsetTop + $nav.outerHeight()) {
        var scroll_left = $nav[0].scrollLeft, click_offset = scroll_left + x,
            $tabs = $nav.find(".tab");
        // Since each tab has a different width
        $tabs.each(function(i) {
            if (click_offset >= this.offsetLeft && click_offset < this.offsetLeft + this.offsetWidth) {
                // Hurray, we clicked a tab, do something like .click()
            }
        });
    }
});
于 2013-08-15T17:18:26.080 に答える