5

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

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

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

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

  • 检测点击事件的 Y 坐标。如果坐标小于浮动标题的高度，则中止单击操作。然而，这也不起作用——在我“返回 true；”之后，按钮的单击处理程序从未触发。

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

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

任何想法，将不胜感激！

4

3 回答 3

2

经过漫长的消除过程，想通了这一点。JQM 1.3 中引入的新“面板”会导致移动设备上的固定标头出现问题。任何对标题的点击都会被忽略，就好像标题的 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); 固定标头将开始捕获事件。

于 2013-09-19T17:09:49.597 回答
1

我为 WP8 所做的就是在具有点击处理程序的元素后面放置一个背景。如果点击失败，下面的元素会抓住它。通常模态框背后有一个背景，所以我把它放在那里。这e.stopPropagation()是矫枉过正，但不应该伤害。您也可以尝试评论中的修复方法之一。对于不应该触发的元素，我不知道具体情况，但在附加处理程序或使用 selector 参数将其附加到父元素之前，请确保您的元素已完全加载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;
    }
}

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

于 2013-09-19T15:45:26.077 回答
1

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

于 2013-12-16T22:22:29.053 回答