我不确定是否有其他人在JQuery Mobile中遇到过这种情况,但出于某种原因,我无法阻止我的绝对定位DIV下面的元素和固定标题来拦截移动设备上的点击/点击.
例如,我有一个页面列出了长滚动列表中的联系人.在该页面上是带有按钮的浮动标题.如果我向下滚动列表并单击浮动标题的按钮,则单击将转到标题下面的任何联系人,即使它无法在视觉上看到,因为它位于标题下方.
如果我单击标题中的按钮,按钮永远不会触发 – 它下面的列表元素始终触发.如果我滚动列表以便标题下面没有任何内容,我可以正常点击标题按钮.
到目前为止,我已经尝试过：
– 标题按钮上的event.stopPropagation().然而,这从未被解雇过.下面的元素总是窃取焦点
>检测点击事件的Y坐标.如果坐标小于浮动标题的高度,则中止单击操作.然而,这也不起作用 – 在我“返回true;”之后,按钮的单击处理程序从未触发.
>在浮动标题和列表项容器上设置z-indexes,即使它们已经在视觉上正确.
我很难过.我试着制作一个测试床,但它在那里工作正常.它也可以在JQM演示站点上正常工作,因此它必须与我的应用程序的CSS或结构有关.我想不出什么会导致浮动元素正确显示,但只有在其他任何东西都没有可用的时候才可以点击.
任何想法,将不胜感激！
最佳答案
通过一个漫长的消除过程来计算出这个. JQM 1.3中引入的新“面板”导致移动设备上固定标头出现问题.对标题的任何点击都会被忽略,就好像标题的z-index低于其下方的z-index,即使它在视觉上位于顶部.
原文链接：https://www.f2er.com/html/425997.html我通过从ui-panel-content-wrap DIV中删除所有类来找到问题
var wrapper = $(".ui-panel-content-wrap");
$(wrapper).removeClass('ui-body-c').removeClass('ui-panel-animate').removeClass('ui-panel-content-wrap-closed').removeClass('ui-panel-content-wrap');
一旦我这样做,它当然打破了面板,但我的固定标题再次可以正确点击.
从那里开始,我重新介绍了每个课程,直到我发现“ui-panel-content-wrap”是罪犯.然后我追溯到这个：
/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,.ui-panel-animate.ui-panel-content-wrap,.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0);
}
如果你注释掉或覆盖-webkit-transform：translate3d(0,0);固定标题将开始捕获事件.
