OnMouseDown 不适用于 Div答案

【问题标题】：OnMouseDown Doesn't Work for DivOnMouseDown 不适用于 Div
【发布时间】：2015-10-26 00:32:15
【问题描述】：

我有一个带有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;
}

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

【问题讨论】：

在这里工作正常：jsfiddle.net/a2k4njgL/1

标签： javascript html css ionic-framework ionic

【解决方案1】：

我加了

<html></html>

围绕它的标签，它工作得很好！

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

【讨论】：

你没有看我的代码笔，它提供了完整的例子。
我认为尽可能隔离代码示例很有用——所以我通常只尝试 c/ping 相关的 html 以确保那里没有问题

【解决方案2】：

以某种方式浮动此 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

【讨论】：

优秀。谢谢先生。

【解决方案3】：

您的 .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

【讨论】：

【解决方案4】：

查看示例............

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

【讨论】：