点击未触发溢出事件:滚动
Click event not firing with overflow: scroll
此问题发生在我们正在构建的基于cordova的Android应用程序中的股票浏览器中,该浏览器至少包含Android 4.1.2(而非Mobile 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>
我尝试过用jQuery以多种方式附加点击处理程序,例如:
$('body').on('click', 'header .tab', function(event){ ... });
或
$('.tabs .tab').on('click', function(event){ ... });
以及选择器上的变体,如"header.tabs a"、"header.tables a"answers"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"的元素后面的任何内容。调整每个选项卡、选项卡容器和/或导航元素的z索引对此也没有影响。
从CSS中删除"overflow:scroll"可以缓解问题,并且使用任何注册处理程序的方法都会触发事件("-webkit overflow scrolling:touch"似乎没有效果)。但我显然失去了水平滚动的能力。因此,具有可滚动内部内容的元素似乎以某种方式从事件冒泡层次结构中删除了。它也适用于移动Chrome和所有iOS设备。
周围有人找到工作了吗?
此外,在中为WebView声明了webView.getSettings().setJavaScriptEnabled(true);
。
我最终基本上完成了自己的命中检测:
$('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()
}
});
}
});
相关文章:
- 点击启动弹出事件未显示
- D3.js:如何在svg上移动鼠标时创建弹出事件
- 事件侦听器 / CSS 伪类出现时滚动条
- 萨特利泽关闭弹出事件
- 取消弹出jquery滚动事件
- UIWebView 在键盘出现时滚动.导致点击偏移错误
- 如何找出导致滚动条的元素
- 如何使用流的排出事件.在节点.js中可写
- 如何在高图表中查找鼠标出事件的系列名称
- Javascript鼠标滚轮事件滚动
- 点击未触发溢出事件:滚动
- 将jquery事件滚动与“;在“上”;
- jQuery列表中每个产品的基于悬停的弹出事件
- 如果其他类出现在滚动高度,则删除该类
- 找出无缝滚动w/position:iOS 8上的固定元素
- 无法抛出事件
- 鼠标悬停和鼠标移出事件是否不匹配?
- 谷歌地图折线滑出事件
- 鼠标悬停/出事件时奇怪的动画行为
- 使用isscroll时防止弹出窗口滚动