CSS button/link not registering on some clicks

I want a button to "depress" when clicked. However, the method I have attempted has an undesirable effect - some clicks in certain locations on the button aren't being registered.

This question is not about JavaScript. I have linked to a JSFiddle below, which uses a JavaScript click event listener, but this is only to describe the problem better. The actual problem I'm facing is nothing todo with event listeners - the hyperlink itself does not work when clicked in various places (the browser doesn't navigate to the linked page, and even though the CSS :active class works fine, the browser behaves as if there wasn't even a click).

The fat, depressable button I'm trying to style.

CSS I'm using:

a.fatButton {
    display: inline-block;
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top: 8px;
    box-shadow: none;
}

HTML of button inside container div:

<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>

Here is a JSFiddle describing the problem in more depth: http://jsfiddle.net/g105b/d3Y9X/

And here is a recording of the problem: http://youtu.be/N6UfWdbA1Ac

The problem is when there is any movement in the button... this could be a change of the "top" property - as in this example - a margin-top, a negative margin-bottom, a translateY, padding-top ... there must be a way to create this type of button-press effect without having this problem?

I am using Chrome 29, which was used to record the video, but the problem is also apparent in Firefox 23, although the "dud area" is in a different place on the button within Firefox.

---

It is because you are moving the button with the :active selector. The top of the element changes by 8px and this happens before the click event is registered with Javascript. So when you click within the top 8 pixels the click won't register.

You could achieve the same effect by also changing the padding-top value within :active.

a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

Updated fiddle: http://jsfiddle.net/NT5e2/

---

i think we can use "mousedown" instead of "click" , can solve this problem

Updated fiddle: http://jsfiddle.net/d3Y9X/8/

document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
    c++;
    csp.textContent = c;
    e.preventDefault();
    return false;
});

---

the reason is that the :active pseudo-class is used to apply css to elements while they're being clicked upon. So it happens before click event triggers. When you move the button position 8px down, the button is not there any more and it has been moved to 8px down so the click event does not trigger and the link does not work.

Solution: I think you should design a background image with shadow and another one without shadow and toggle the background image of your button when it is being clicked.

链接地址: http://www.djcxy.com/p/74112.html

上一篇: 元素作为窗口上的属性存在

下一篇: CSS按钮/链接没有注册点击