2

此问题发生在至少包含 Android 4.1.2（不是移动 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(){ ... }; });

并将 onclick 属性添加到每个a标签：

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

这些都不起作用。

但是，使用此代码：

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

点击事件将打印“navheader”或设置了“溢出：滚动”的元素后面的任何内容。调整每个选项卡、选项卡容器和/或导航元素的 z-index 对此也没有影响。

从 CSS 中删除 'overflow: scroll' 可以缓解问题，并且使用任何注册处理程序的方法触发事件（'-webkit-overflow-scrolling: touch' 似乎没有效果）。但是后来我显然失去了水平滚动的能力。因此，似乎具有可滚动内部内容的元素以某种方式从事件冒泡层次结构中移除。它也适用于移动 Chrome 和所有 iOS 设备。

有没有人找到解决方法？

此外，webView.getSettings().setJavaScriptEnabled(true);在 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 回答