Clicks / tap在JQuery Mobile中通过绝对定位的div

I'm not sure if anyone else has experienced this in JQuery Mobile, but for some reason I can't prevent elements underneath my absolute positioned DIVs and fixed header from intercepting clicks/taps on mobile devices.

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

For example, I have a page that lists contacts in a long scrolling list. On that page is a floating header with a button. If I scroll the list downward and click on the floating header's button, the click will pass through to whatever contact is underneath the header, even though it cannot be visually seen because it is underneath the header.

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

If I click on a button in the header, the button never triggers - the list element underneath it always fires. If I scroll the list so that there is nothing underneath the header, however, I can click the header's button normally.

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

So far I've tried: - event.stopPropagation() on the header's button. This never even fired, however. The element underneath always steals focus

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

Detecting the click event's Y coordinates. If the coordinates are less than the height of the floating header, abort the click action. This didn't work either, however - after I did "return true;", the button's click handler never fired.

检测单击事件的Y坐标。如果坐标小于浮动标题的高度，则中止单击操作。然而，这也没有用 - 在我“返回true;”之后，按钮的点击处理程序从未触发过。
Setting z-indexes on the floating header and list item container, even though they are already visually correct.

在浮动标题和列表项容器上设置z-indexes，即使它们已经在视觉上正确。

I'm quite stumped. I tried to make a testbed but it works correctly there. It also works correctly on the JQM demo site, so it must be something about my app's CSS or structure. I can't think of what would cause floating elements to show correctly but only be tappable when nothing else tappable is underneath them.

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

Any ideas would be appreciated!

任何想法，将不胜感激！

3 个解决方案

#1

Figured this one out though a long process of elimination. The new "panel" introduced in JQM 1.3 causes problems with fixed headers on mobile devices. Any clicks on the header are ignored, as if the header has a lower z-index than what sits beneath it, even though it is visually on top.

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

I found the issue by ripping all of the classes off of the ui-panel-content-wrap DIV

我通过从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');

Once I did this, it of course broke the panel, but my fixed header was properly clickable again.

一旦我这样做，它当然打破了面板，但我的固定标题再次正确点击。

From there, I re-introduced each class until I found that "ui-panel-content-wrap" was the offender. I then traced it down to this:

从那里开始，我重新介绍了每个课程，直到我发现“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);
}

If you comment out or override -webkit-transform: translate3d(0,0,0); fixed headers will begin trapping events.

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

#2

What I did for WP8 was put a backdrop behind your elements that has a click handler. If the click falls through, the element underneath will catch it. Usually there is a backdrop behind modals so that's where I put it. The e.stopPropagation() is overkill but shouldn't hurt. You might also try one of the fixes in the comments. For the element that isn't firing when it should be, I don't know the circumstances but make sure your element is fully loaded before attaching the handler or attach it to the parent with the selector parameter parent.on('click','.button',function(){ //code });

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

html

HTML

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

css

CSS

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

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

You can also just attach the click handler to the main parent of the elements to prevent it falling through as well.

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

#3

I just had the same problem (though not in the header). Just for the record, if anyone else visits the page. Applying z-index: 1; to the tapped element solved it. Taps are now being recognized.

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

#1