Question

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

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

以某种方式浮动此div（＃filter-button）会导致它没有收到点击事件，但您可以使用以下css修复它：

#filter-button {
  width: 100px;
  position: absolute; //changed position to absolute and removed float
  height: 54px;
  font-size: 20px;
  right: 12px;        //changed from padding right to positioning 12px from right edge
}

现在它就像一个魅力 - link

Answer 2

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

E.g。

#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

Answer 3

我添加了

<html></html>

围绕着标签，它完美无缺！

检查浏览器的控制台，看看你的其他地方是否有错误的javascript代码阻止该代码运行？

Answer 4

参见示例..........

＆＃13;

<div onmousedown="alert('onmousedown workinkg')" id="add id" class="add class">
Mousedown Test <br/>
Add any code and tag Here....
</div>

＆＃13;

OnMouseDown不适用于Div

4 个答案: