HTML按鈕無法點擊，甚至和CSS規則

踢看看這個按鈕：http://jsfiddle.net/vtortola/Dnxpe/HTML按鈕無法點擊，甚至和CSS規則

我的Chrome，如果你點擊頂部邊框，即使「：懸停」和「：活動「css規則觸發器，事件不會被觸發。如果你點擊更多的中心，那麼它工作正常。

在IE9中，如果你這樣做，它會錯過50％的點擊次數。

問題是邊距，當您單擊邊距開關時，給出按鈕被按下的效果，但是如果您單擊頂部邊框，則會使指針脫離按鈕，但是...事件應該已經被觸發......爲什麼會發生這種情況

謝謝。

來源

2012-07-13 vtortola

奇怪 - 在'mousedown'事件工作正常.....那是一個奇怪的一個！ – ManseUK 2012-07-13 10:39:41

在CSS我注意到你有按鈕，輸入[類型=「提交」] 和進一步下來按鈕，輸入[type = submit] – rorypicko 2012-07-13 10:44:24

這可能是因爲只有mousedown()和mouseup()連續完成click()才被認爲是完整的。在點擊頂部邊界mouseup()時不會被觸發，對於click()也是如此。

如果您使用mousedown（），它會每次都有效，但它會在整個點擊完成之前發生。

$('button').mousedown(function(e){ 
    $('#clicks').append('<span>click </span>'); 
});

爲了解決這個問題，你可以做到以下幾點：

添加一個容器按鈕，然後添加一個mousedown處理程序的按鈕和一個mouseup處理程序的容器。如果你確定它們都被調用，那麼你可以確定已經執行了按鈕上的點擊事件。

像這樣：

HTML

<div id="cont"><button>Click me</button></div> 
<div id="clicks"> 
</div>

的JavaScript

var mdown = false; 

$('button').mousedown(function(e){ 
    mdown = true; 
}); 

$('#cont').mouseup(function(e){ 
    if (mdown) 
    { 
     $('#clicks').append('<span>click </span>'); 
     mdown = false; 
    } 
});

來源

2012-07-13 10:46:14 ryuusenshi

humm ...它是非常有意義的。非常感謝。 – vtortola 2012-07-13 12:06:54

我檢查了你的代碼，並發現由於CSS的一個有趣的bug.Its。即使你可以重新生成該錯誤。

步驟： 1.單擊靠近上邊框的按鈕，但不要從鼠標鬆開手指。 2.現在，看看按鈕，你的按鈕實際上被推下來，這就是爲什麼，它不能觸發按鈕單擊事件。

解決方案：

按鈕處於活動狀態時移除邊距。

button:active,input[type=submit]:active 
{ 
    box-shadow: 0px 0px 3px 3px #D8F6CE; 
}

我希望它有幫助。

來源

2012-07-13 10:51:36

這是我想出的解決方案，它使用一個css psudo元素來捕獲單擊事件。這裏的好處是你不需要JavaScript。點擊事件總是被：after和bubble捕獲到按鈕。

http://jsfiddle.net/kevinrockwood/fUuUB/1/

要注意的主要事情是CSS：

button:after{ 
    content: " "; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2013-02-01 20:29:24

這工作得很好！ – Mitch 2013-02-01 20:31:49

HTML按鈕無法點擊，甚至和CSS規則

回答

相關問題