Why doesn't the mouseup/mousedown event function work from the first click? It works from the second

Hey guys,

I pretty much explained the issue up there in the topic’s title.

jQuery responds only from the second click. When you click on any of my two buttons for the first time - nothing. Why is that?

I use mousedown/mouseup event methods, i even changed their order to be mouseup/mousedown and in the other mousedown/mouseup.

Here’s the link to my project: http://codepen.io/RycerzPegaza/pen/QENWNy

Any help appreciated :slight_smile:

Hi man. How’s it going?

Well, my english isn’t very good, but, I’ll do my best for you can understand me. ok?
I’ve been playing with your code, and I noted there’s a delay when you invoke mousedown() and mouseup(). Since, mousedown() and mouseup() actually are the same that the click function, I’ve made a chain with them like this:
// **** search icon click button effect
$("#search-icon").mousedown(function() {
------“background” : “#d9dBc3”, “border-bottom” : “2px solid”,
------“transform”: “translateY(-8%)”,
------“box-shadow” : “0 1px #666
}).mouseup(function() {
------“background” : “#eeeeee”,
------“transform”: “translateY(-14%)”,
------“box-shadow” : “0 3px #666

This way, your button gonna react as soon as someone press over it. You can make the same with the another button.

Again, I’m sorry for my awful english. I hope that this solution can help you. Take care.

Unfortunately, when these methods are chained, it doesn’t change anything. But thank you for your post Victor.

For some reason the button-pressing animation runs from the second click. First click - nothing happens.

Still waiting for some good advice

EDIT: OK, I managed to find the reason why this happened. I didn’t need to surrond .mousedown/.mouseup methods with a .click method. .Mousedown does the similar job, so i just deleted the .click method

Hi there,

I’m glad you found that you don’t need the click method. What you were actually telling the browser is that when you click the button, you want to set up the mousedown and mouseup handlers (as opposed to having them set up at start, like your click handler). I have another suggestion that could help a bit more. You don’t need the mousedown/mouseup event handlers to style your button. CSS has a pseudo-class, :active, that was made for exactly the effect you’re going for. It’s more performant (though you wouldn’t notice a performance difference), but more importantly, it keeps your style all in one place and will look better when other people review your code. Here’s an example:

#random-button:active {
  background: #d9dBc3;
  border-bottom: 2px solid;
  transform: translateY(-8%);
  box-shadow: 0 1px #666;

It works great in your project.

1 Like