点击/点击正在通过 JQuery Mobile 中的绝对定位 div答案

【问题标题】：Clicks/taps are passing through absolute positioned divs in JQuery Mobile点击/点击正在通过 JQuery Mobile 中的绝对定位 div
【发布时间】：2013-09-18 21:55:15
【问题描述】：

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

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

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

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

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

我很困惑。我试图制作一个测试平台，但它在那里正常工作。它在 JQM 演示站点上也可以正常工作，因此它必须与我的应用程序的 CSS 或结构有关。我想不出什么会导致浮动元素正确显示，但只有在它们下方没有其他可点击的时候才能点击。

任何想法都将不胜感激！

【问题讨论】：

我在 WP8 上注意到了这种行为，但在其他设备上没有。你在什么平台上看到这个？你能提供一个你的html、css和脚本的例子吗？
它发生在 Galaxy S3 (Android) 和 iOS Safari 上，而不是 Chrome (Windows 7) 我希望我能提供一个示例，但我只能在实际应用程序中实现它并且该应用程序处于 NDA 之下。您是否曾在 WP8 中找到治愈方法？
相当“知名”并且在 Android 上未修复（请参阅 here）。在 Android 上，我将其修复为 this。您使用的是哪个版本的 JQM？
这听起来像是问题，尽管您的修复不适用于我的场景，因为我没有进行模态对话框。我需要禁用在我的浮动元素下滑动的任何元素，这非常棘手。我正在使用 JQM 1.3.1。由于我无法在 jquerymobile.com 上从我的手机上回购该错误，因此我可能会拆卸我的网络应用程序，直到该功能正常工作，然后重新启用以查看问题所在。我会发布我发现的内容。

标签： javascript jquery html css jquery-mobile

【解决方案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);固定标头将开始捕获事件。

【讨论】：

多么奇怪的错误。很好的发现！
是的，只花了我一天的时间来修复。 :) 希望此信息对其他人有所帮助。到目前为止，我没有看到任何副作用。

【解决方案2】：

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

将其附加到父元素之前，请确保您的元素已完全加载

html

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

css

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

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

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

【讨论】：

【解决方案3】：

我也遇到了同样的问题（虽然不在标题中）。仅作记录，如果其他人访问该页面。将z-index: 1; 应用于被抽头的元素解决了它。现在正在识别水龙头。

【讨论】：