IE 與 Firefox 模擬 Click 事件及表單以新視窗提交的最佳實踐

前言

早期開發常需以 JavaScript 模擬連結點擊或讓表單在新視窗送出。瀏覽器差異導致需分別處理 IE 的 click() 與 Firefox 的 dispatchEvent。但事實上，HTML 表單原生支援 target="_blank"，才是正統解法。

模擬 Click 事件的跨瀏覽器寫法

<a href="https://www.example.com" target="_blank" id="aa">開啟連結</a>
<script>
var link = document.getElementById('aa');
if (document.all) {                    // IE
    link.click();
} else {                               // Firefox 等現代瀏覽器
    var ev = document.createEvent('MouseEvents');
    ev.initEvent('click', true, true);
    link.dispatchEvent(ev);
}
</script>

缺點：Firefox 若連結未綁定 onclick，dispatchEvent 不會觸發預設導航行為，需額外處理。

正統做法：表單 target="_blank"

<form action="/shopping/index" method="post" id="processorder" target="_blank" onsubmit="return checkOrder()">
    <input type="submit" id="button2" value="送出" class="ck_lijisn" />
</form>

• 瀏覽器原生支援，無需 JavaScript。
• 按鈕必須為 type="submit"，type="button" 不會觸發提交。
• 若使用 document.getElementById('processorder').submit() 程式碼提交，target="_blank" 會失效，需改用 form.submit() 並搭配 form.target = '_blank'。

總結

能用原生 HTML 屬性解決的，就別用 JavaScript 模擬。target="_blank" 於表單與連結皆適用，相容性最佳、維護成本最低。