於是我試著寫出以下的測試程式：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" onclick="alert('A1');" >A1</a> <br />
<a href="#" onclick="alert('A2');" >A2</a> <br />
<a href="#" onclick="alert('A3');" disabled="disabled" >A3</a>
</div>
<div>
<input type="button" value="B1" onclick="alert('B1');" /> <br />
<input type="button" value="B2" onclick="alert('B2');" /> <br />
<input type="button" value="B3" onclick="alert('B3');" disabled="disabled" />
</div>
</form>
</body>
</html>
這似乎沒甚麼難的，只是... 當我開啟 firefox、chrome 等瀏覽器時，原先被設為 disabled 的超連結竟然還可以被點選，且觸發 onclick 事件。這種現象在 Button 身上並不會因瀏覽器不同而有所差異，目前只有超連結才會。
為了避免這不一致的運作行為，我參考了 Disable anchors in Chrome/WebKit/Safari 的作法，去判斷每一個超連結，如果屬性有設 disabled，就避免觸發 click 事件。
所以加上一段 jQuery Code 去處理所有 disabled 的超連結後，就可以適用於各瀏覽器了。
<script>
$(function () {
//避免 disabled 的 hyperlink 被觸發， chrome,firefox 需要這段處理
$("a").click(function () {
if ($(this).attr("disabled") == "disabled") {
event.preventDefault();
}
});
});
</script>
參考：01： Disable anchors in Chrome/WebKit/Safari
02： jQuery .attr(“disabled”, “disabled”) not working in Chrome
03：.prop() vs .attr()
沒有留言:
張貼留言