在触摸最上面的 div 时选择它下面的 div 的内容 - z-index 属性答案

【问题标题】：On touching uppermost div selects contents of div under it - z-index property在触摸最上面的 div 时选择它下面的 div 的内容 - z-index 属性
【发布时间】：2026-02-03 06:35:02
【问题描述】：

不过我有一个奇怪的问题，当我单击 z-index 20 的内容时，z-index 1 的内容会在我的手机中被选中。

图像有两个屏幕截图 - 图像右侧的部分仅用于说明我的问题，因此白色灰色 div 位于我的内容 div 后面。

有人可以救救吗。

相关的 CSS 文件：

#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}

.snapjs-right .snap-drawer-right {
    display: block;
    z-index: 10;
}

.snapjs-right .snap-drawer-left {
    display: block;
    right: 0;
    left: auto;
    z-index: 1;

}

根据要求的相关HTML脚本：

<body>
<div class="snap-drawers" id="leftid">

...

<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li><a href="noDrag.html">What is Java?</a></li>
<li><a href="noDrag.html">Uses of Inheritence?</a></li>

...

</div>
</div>
<div id="content" class="snap-content">
my content goes here

</div>
</div>
</body>

【问题讨论】：

你也可以添加 HTML 吗？

标签： javascript html css snap.js

【解决方案1】：

肯定是因为“继承的使用”是唯一的链接元素（除了“什么是 java”），它将被选中 - 没有其他选择！

尝试将该元素隐藏时的显示设置为“无”。

【讨论】：

你的意思是说如果我在#content div（黑色div）中放置一些可点击元素或其他东西，它不会选择？显然是这样的:(
有趣...当您不希望它可点击时，您是否尝试过将 css 设置为“显示：无”？
使其不可见肯定会解决问题，但是当我尝试打开内容时它会带来轻微的闪烁。实际上，我仍然希望有一些 CSS 解决方案可以发挥作用。在桌面上使用 chrome 或类似时，我看不到任何问题。该问题在基于触摸的手机中很突出，默认浏览器在触摸时会突出显示链接/可点击项等。我想在我的应用中禁用它。
嗯，很抱歉，我真的无法提供更多帮助 - 我没有太多使用触摸屏手机的经验
谢谢 barnaby - 如果你知道除了 stackoverflw 之外的任何论坛或网站，我可以得到答案？？？

【解决方案2】：

您可以在内容面板上单击/拖动时尝试挂钩事件，并在面板关闭时执行event.stopPropagation(); 或event.preventDefault();。据我所知，您可以看到因为 Snap.js 添加了相应的类，例如 (class="snapjs-right" 或 class="snapjs-left") 到正文以指示面板是否打开。

所以首先你必须检查一下。

使用 jQuery，它看起来像这样：

$(document).ready(function() { 
    $("#UsesofInheritence_Anchor_ID").bind("click", function() {
        if (!($('body').hasClass("snapjs-right"))){
            event.stopPropagation();
            event.preventDefault();
        }
    });
});

【讨论】：