CODEWITHSUNDEEP
javascripthtmlcssionic-framework
thank_you
thank_you

Reputation: 11107

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?

Upvotes: 0

Views: 5013

Answers (4)

Ankur DalsaniYa
Ankur DalsaniYa

Reputation: 1

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

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

Upvotes: -1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

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

Upvotes: 2

Keammoort
Keammoort

Reputation: 3075

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

Upvotes: 1

Brendan W
Brendan W

Reputation: 3453

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

Upvotes: 0

Related Questions