Font-Awesome 圖標阻止點擊父按鈕
[英]Font-Awesome icon preventing click in parent button
問題描述
我遇到了一個問題，我放置在按鈕元素內的 Font-Awesome 圖標的左側兩個像素不會觸發按鈕的點擊事件。
這是一個示例按鈕：
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
這就是 bootstrap 的樣子
關於為什么剩下的兩個像素不會觸發點擊事件的任何想法？
編輯：這是我設法重新創建問題的測試站點： http : //ace.cwserve.com
2 個解決方案
解決方案1
9 已采納 2019-11-28 16:23:06
我知道這篇文章已經有 4 年的歷史了，但它可能會幫助人們理解為什么按鈕內的字體很棒的“圖標”會阻止點擊事件。
渲染時，圖標類向圖標標記添加一個::before偽元素，以防止按鈕的單擊事件。
鑒於這種情況，我們絕對應該看看CSS 指針事件屬性
pointer-events 屬性定義元素是否對指針事件做出反應。
所以我們只需要為按鈕內的“圖標”添加這個 css 聲明：
button > i {
pointer-events: none;
}
解決方案2
1 2014-02-09 01:28:57
大綱
outline不是 CSS 框的一部分，這意味着它不會觸發點擊事件。 這可能有點違反直覺，但這就是它的工作原理......
您的頁面在.btn:focus上設置了大綱，但這似乎不是問題，因為它的偏移量為 -2（意味着它顯示在框內，而不是框外）。
將框移動到 :active
您可以在:active上移動框，這可以產生整潔的效果，但首先移動框，然后觸發單擊事件，這將使用移動的位置。
您可以通過按住鼠標按鈕來查看此操作； 框會移動，但在您釋放按鈕之前不會觸發該事件。 所以如果你把你的盒子向右移動一個像素，那么左邊的 10 個像素不會做任何事情。
這是根據規范，來自DOM 規范：
點擊
當在元素上單擊指針設備按鈕時，會發生 click 事件。 單擊定義為在同一屏幕位置上按下鼠標和按下鼠標。 這些事件的順序是：
- 鼠標按下
- 鼠標向上
- 點擊
這似乎是問題所在，以下 CSS 似乎解決了它：
button.btn:active {
left: 1px;
top: 1px;
}
例子
這是一個演示這兩個問題的腳本：
<!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>
jQuery 單擊字體真棒圖標在所有瀏覽器中未一致注冊
[英]jQuery click on font-awesome icon not registering consistently in all browsers
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.