HTML链接未在某些点击中注册

Question

I tried to create a fancy button. Problem that when it is clicked just between text and bottom edge of the button click event do not fire. Here is jsbin .

Seems to be that problem in this code:

.button:active {
  top:2px;
  box-shadow:0 2px #36c
}

But i need this "push" effect. So how to save the effect and get click event back?

Answer 1

Don't use box-shadow , use border-bottom , like so:

.button {
    border-bottom: 4px solid #000;
}

.button:active {
    border-bottom: 2px solid #000;
}

Demo: http://jsbin.com/IGUReWO/1/

Answer 2

that's because the click event fires on mouseup where as mousedown obviously gets fired on mousedown. I only could reproduce the behaviour you described, if i click the button and release the mouse outside of it.

If you want the push effect, you could attach the mousedown event instead of the click event and delay it for a few ms, for instance:

$('.button').on('mousedown', function() {
  window.setTimeout(function() {
    var val = parseInt($('.mousedown span').html(), 10);
    val++;
    $('.mousedown span').text(val);
    return false;
  }, 200);
});

I hope i could help, Cheers

Answer 3

replace

box-shadow: 0 4px black;

with

border-bottom: 4px solid black;

and

box-shadow:0 2px black;

with

border-bottom: 2px solid black;

You can't click on a box shadow, but you can click on a border.