OnMouseDown Doesn't Work for Div

I have a div with a onmousedown but the click is not getting recognized. No alert is popping up. Here is a codepen with a working example.

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

Here is the code sample.

  <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;
}

Why is this not working and how do I fix it?

Somehow floating this div (#filter-button) causes it not receiving click events, but you can fix that with following 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
}

Now it works like a charm - link

Your .title element is overlapping your filter button. To make your filter button above the .title element you need to set z-index: 1 to it.

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

I added

<html></html>

tags around that and it worked perfectly!

Check the browser's console to see if you have bad javascript code elsewhere that's preventing that one from running?

enter image description here

See example..........

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