於是我試著寫出以下的測試程式:
<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()