Question

我不确定是否有其他人在JQuery Mobile中遇到过这种情况，但出于某种原因，我无法阻止我的绝对定位DIV下面的元素和固定标题来阻止移动设备上的点击/点按。

例如，我有一个列出长滚动列表中联系人的页面。在该页面上是带有按钮的浮动标题。如果我向下滚动列表并单击浮动标题的按钮，则单击将转到标题下面的任何联系人，即使它无法在视觉上看到，因为它位于标题下方。

如果我点击标题中的按钮，按钮永远不会触发 - 它下面的列表元素总是会触发。如果我滚动列表以便标题下面没有任何内容，我可以正常点击标题按钮。

到目前为止，我已尝试过： - 标题按钮上的event.stopPropagation（）。然而，这从未被解雇过。下面的元素总是窃取焦点

检测点击事件的Y坐标。如果坐标小于浮动标题的高度，则中止单击操作。然而，这也没有用 - 在我“返回true;”之后，按钮的点击处理程序从未被触发。
在浮动标题和列表项容器上设置z-indexes，即使它们已经在视觉上正确。

我很难过。我试着制作一个测试床，但它在那里工作正常。它也可以在JQM演示站点上正常工作，因此它必须与我的应用程序的CSS或结构有关。我想不出什么会导致浮动元素正确显示，但只有在其他任何东西都没有可用的情况下才可以点击。

任何想法都将不胜感激！

Answer 1

通过漫长的淘汰过程来解决这个问题。 JQM 1.3中引入的新“面板”导致移动设备上固定标头出现问题。对标题的任何点击都会被忽略，就好像标题的z-index低于其下方的z-index，即使它在视觉上位于顶部。

我通过从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,0);
}

如果你注释掉或覆盖-webkit-transform：translate3d（0,0,0）;固定标题将开始捕获事件。

Answer 2

我为WP8所做的是在具有点击处理程序的元素后面放置一个背景。如果点击通过，下面的元素将捕获它。通常在模态背后有一个背景，所以我把它放在哪里。 e.stopPropagation()有点矫枉过正，但不应该受到伤害。您也可以尝试评论中的一个修复程序。对于应该没有触发的元素，我不知道情况，但在附加处理程序或使用选择器参数parent.on('click','.button',function(){ //code });

<强> HTML

<div class="backdrop"></div>

<强> CSS

.backdrop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<强> JS

$(document).ready(){
    $('.backdrop').on('click',function(e){
        e.stopPropagation();
        return false;
    }
}

您也可以将点击处理程序附加到元素的主要父级，以防止它掉落。

Answer 3

我遇到了同样的问题（虽然不在标题中）。只是为了记录，如果有其他人访问该页面。将z-index: 1;应用于tapped元素解决了它。水龙头现在被认可。

Clicks / tap在JQuery Mobile中传递绝对定位的div

3 个答案: