javascript - OnMouseDown 不适用于 Div

Question

我有一个带有 onmousedown 的 div，但是点击没有被识别。没有警报弹出。这是一个带有工作示例的代码笔。

http://codepen.io/anon/pen/QbzYpb?editors=110

这是代码示例。

  <ion-header class="bar bar-subheader">
    <div class="title">
      the cool title
    </div>
    <div onmousedown="alert(1)" id="filter-button">
      <span class="assertive">
          <i class="icon ion-arrow-down-b"></i>
          CLICK ME
        </span>
    </div>
  </ion-header>

CSS

#filter-button {
  width: 100px;
  float: right;
  height: 54px;
  font-size: 20px;
  padding-right: 12px;
}

为什么这不起作用，我该如何解决？

Answer 1

您的 .title 元素与您的过滤器按钮重叠。要使您的过滤器按钮位于 .title 元素上方，您需要为其设置 z-index: 1。

例如

#filter-button {
  width: 100px;
  float: right;
  height: 54px;
  font-size: 20px;
  padding-right: 12px;
  position: relative; /* need this for z-index to work */
  z-index: 1;
}

Codepen