Javascript 对于现有图元，单击时添加覆盖

我有一个基于Ratchet的超基本布局

<div id="view1">

    <header class="bar bar-nav" id="header1">
        <h1 class="title">My Application</h1>
    </header>

    <div class="content" id="content1">

        <nav class="bar bar-tab" id="nav1"> 

             <a class="tab-item active" href="#" id="navitem1">
                <span class="icon icon-home"></span>
                <span class="tab-label">Home</span>
             </a>

             <a class="tab-item " href="#" id="navitem2">
                <span class="icon icon-info"></span>
                <span class="tab-label">About</span>
             </a>

        </nav>

    </div>

</div>

我的申请

当用户单击某个元素时（满足某些条件，例如，具有

ID

集），将添加一个覆盖，仅覆盖这一个元素（不是整页，并且完全不会弄乱布局）

如果嵌套元素收到单击事件，则首先拾取最后面的元素，如果用户再次单击，则拾取满足条件的下一个子元素。（意思是：如果用户在页面底部单击，则首先拾取

view1

。如果再次单击，则将是

content1

，然后是

nav1

，依此类推。）

这主要是一个实验，但我还是搞不懂

我尝试过不同的解决方案（比如插件），但都没有成功

有什么想法吗

---

更新

我能描述这个问题的最短方式是：我想复制Inspector（Chrome/Safari）突出显示不同元素的方式

---

---

Fiddle:

jQuery的

事件。target

应该为您做这件事

这不是一个明确的答案，但我已经为您编写了一些代码，我们可以对其进行迭代。此覆盖仅在单击的元素具有ID时显示

覆盖jQuery

$(document).on('click', function (event) {

  var target = $(event.target);

  if( target.attr('id') ) {
      target.addClass('overlay');
  }

});

覆盖CSS

.overlay:before {
    position: absolute;
    content:'';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(5, 11, 37, 0.5);
}

---

不清楚您想要什么。@Maysam首先，我想在单击的元素上创建一个覆盖（使用

ID

set）。可能让您困惑的是停止事件传播的问题，但这对于现在来说并不重要，因为我甚至还不能绘制覆盖图。什么元素？页面上只有两个按钮。什么样的覆盖层？全屏显示，或覆盖元素？@Tim使用

ID

属性集显示所有元素。至于覆盖，我想要一些覆盖元素的精确（当前）大小的东西。你能给元素编码（必须覆盖覆盖覆盖）并更新你的小提琴吗？看看原始帖子中的更新。；-）这更接近你的意思吗？我发现很难找到工作。我首先考虑在div中添加clicked元素和CSS样式，但这会让页面变得一团糟，因为不仅仅如此。当前正在使用伪元素，但这要求父元素具有相对定位。这个实现有多大？非常感谢！你肯定更接近了。但还是有很大的空间。这是我（根据你的片段）想到的。它甚至更接近，它的主要问题是：如果你点击最外面的元素（例如内容），那么你就完成了。您将再也无法访问内部元素。嗯……做得很好。如果单击了

.content

，但没有单击

.content

中的元素，则阻止添加覆盖是否会有所帮助？还不知道怎么做，但如果这不能解决任何问题，就不值得尝试。或者可以给需要这个功能的元素一个类吗？很抱歉延迟响应，但我一直。。。也在挣扎。我想我已经非常接近我最初的打算了。（仅限JS解决方案）。