Font-Awesome icon preventing click in parent button

问题

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.

Here's an example button:

<button class="btn btn-mini">
    <i class="icon-edit"></i>
</button>

And here's what it looks like with bootstrap

Any ideas for why those left two pixels don't trigger a click event?

Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com

回答1:

Outline

The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...

Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).

Moving the box on :active

You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:

click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:

mousedown

mouseup

click

This seems to be the problem, this following CSS seems to solve it:

button.btn:active { 
    left: 1px;
    top: 1px;
}

Example

Here's a script to demonstrate both issues:

<!DOCTYPE html>
<html><head><style>
    body { margin-left: 30px; }
    div {
        background-color: red;
        border: 20px solid green;
        outline: 20px solid blue;
        width: 100px;
        height: 100px;
        position: relative;
    }

    div:active {
        left: 20px;
        top: 20px;
    }
</style></head> <body>
<div></div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('div').on('click', function(e) {
        alert('click!');
    });
</script></body></html>

回答2:

I know this post is 4 years old but it might help people understand why a font-awesome icon inside a button prevents the click event.

When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.

Given this situation, we should definitly take a look at the CSS pointer-events Property

The pointer-events property defines whether or not an element reacts to pointer events.

So we just need to add this css declaration for the icon which is inside a button:

button > i {
    pointer-events: none;
}

来源：https://stackoverflow.com/questions/21653978/font-awesome-icon-preventing-click-in-parent-button

标签

javascript

css

twitter-bootstrap

font-awesome