Javascript 点击/点击通过JQuery Mobile中绝对定位的div

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

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

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

到目前为止，我已经尝试： -标题按钮上的event.stopPropagation（）。然而，它甚至从未开火。下面的元素总是窃取焦点

• 检测单击事件的Y坐标。如果坐标小于浮动收割台的高度，则中止单击操作。但是，这也不起作用-在我“返回true；”之后，按钮的单击处理程序从未启动

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

我被难住了。我试着做一个试验台，但它在那里工作正常。它在JQM演示站点上也能正常工作，因此它必须与我的应用程序的CSS或结构有关。我想不出什么会导致浮动元素正确显示，但只有当它们下面没有其他可敲击的东西时才可以敲击

---

任何想法都将不胜感激

我为WP8所做的是在元素后面放置一个背景，该元素有一个点击处理程序。如果单击失败，下面的元素将抓住它。情态动词后面通常有一个背景，所以我把它放在这里。

e.stopPropagation（）

是过度杀伤力，但不应该造成伤害。您还可以尝试注释中的一个修复。对于未在应该触发时触发的元素，我不知道具体情况，但请确保在附加处理程序之前已完全加载元素，或使用选择器参数

parent.on（'click'，'.button'，function（）{//code}）将其附加到父元素

html

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

js

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

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

您还可以将单击处理程序附加到元素的主父级，以防止其丢失。
通过一个漫长的消除过程解决了这个问题。JQM 1.3中引入的新“面板”会导致移动设备上的固定头出现问题。对标题的任何单击都将被忽略，就好像标题的z索引低于其下方的z索引一样，即使它在视觉上位于顶部

我通过从ui面板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面板内容包装”才是罪魁祸首。然后我追溯到：

/* 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转换：translate3d（0,0,0）；固定标题将开始捕获事件。
我刚刚遇到了相同的问题（尽管标题中没有）。为了记录在案，如果有人访问该页面。应用
z指数：1到抽头元素解决它。点击现在被识别。
我在WP8上注意到了这种行为，但在其他设备上没有注意到。你在什么平台上看到这个？你还可以提供一个html、css和脚本的例子吗？它发生在Galaxy S3（Android）和iOS Safari上，但不在Chrome（Windows 7）上。我希望我能提供一个示例，但我只能在实际的应用程序中实现，并且该应用程序在NDA下。你有没有在WP8中找到解决方法？相当“知名”而且在Android上没有固定（请参阅）。在安卓系统上，我修复了它。您使用的是哪个版本的JQM？这听起来像是个问题，尽管您的修复程序对我的场景不起作用，因为我没有进行模式对话框。我需要禁用在浮动元素下滑动的任何元素，这相当棘手。我正在使用jqm1.3.1。由于我无法在jquerymobile.com上从我的手机上恢复bug，我可能会拆解我的web应用程序，直到功能正常为止，然后重新启用它以查看问题所在。我会把我找到的贴出来。真奇怪。好发现！是的，只花了我一天时间就修好了。：）希望这些信息能帮助其他人。到目前为止，我没有看到任何副作用。