Javascript 单击事件未触发溢出：滚动_Javascript_Android_Css_Cordova

Javascript 单击事件未触发溢出：滚动

javascript android css cordova

Javascript 单击事件未触发溢出：滚动,javascript,android,css,cordova,Javascript,Android,Css,Cordova,这个问题发生在我们正在构建的基于cordova的Android应用程序中的股票浏览器（至少包括Android 4.1.2（非移动Chrome））和WebView组件中我已经构建了一个页面，在视图的顶部有一个固定的标题，其中包含一组水平滚动的选项卡，下面有基本的DOM和内联CSS，并且每个选项卡上的点击处理程序都不会启动 <html> ... <body> <div> <header class="navheader" style

这个问题发生在我们正在构建的基于cordova的Android应用程序中的股票浏览器（至少包括Android 4.1.2（非移动Chrome））和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>

或

以及选择器上的变体，如“header.tabs a”、“header.tabs.tab a”和“header a”。我还尝试：

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

并将onclick属性添加到每个

标记：

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

单击事件将打印“navheader”或设置为“overflow:scroll”的元素后面的任何内容。调整每个选项卡、选项卡容器和/或导航元素的z索引对此也没有影响

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

有人找到工作了吗

另外，

webView.getSettings（）.setJavaScriptEnabled（true）在中声明用于WebView。
我基本上完成了自己的命中检测：
$('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()
            }
        });
    }
});

$（'body'）。在（'click'，'navheader'，函数（事件）{
var$nav=$（'nav'），x=event.pageX | | | event.clientY，y=event.pageY | | event.clientY；
y-=$（窗口）.scrollTop（）；
//因为导航栏占据了我们的整个宽度
如果（y>$nav[0]。偏移设置（&y<$nav[0]。偏移设置+nav.outerHeight（））{
var scroll\u left=$nav[0]。scroll left，单击\u offset=scroll\u left+x，
$tabs=$nav.find（“.tab”）；
//因为每个标签都有不同的宽度
$tabs.每个（功能（i）{
如果（单击_offset>=this.offsetLeft&&单击_offset我也遇到了同样的问题，如果解决方案不涉及手动处理鼠标点击的x和y坐标，我会不惜一切代价。
<div class="tab"><a href="..." onclick="alert('hi');">...</a></div>

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

$('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()
            }
        });
    }
});