錨標簽打開時如何執行function？

Question

當用戶在我的 React 應用程序中打開鏈接時，我想向我的服務器發送一個發布請求（帶有有效負載）。

我目前的做法是使用onClick和onAuxClick回調，然后過濾掉右鍵單擊（因為那些不直接打開鏈接）。

<a href={link} target="_blank" rel="noopener noreferrer" 
onClick={onLinkClicked} onAuxClick={onLinkClicked}>
    <FaExternalLinkAlt className={styles.headerButton} />
</a>

function onLinkClicked(event: MouseEvent) {
    if ([0,1].includes(event.button)) {
        alert('track click')
    }
}

但是，右鍵單擊然后通過上下文菜單打開鏈接也將被忽略。

另一種選擇似乎是使用ping回調。 但是，這樣做有兩個問題： Ping 似乎不包含我需要的有效負載/正文。 瀏覽器支持似乎很不穩定。

如何可靠地跟蹤鏈接點擊而不出現誤報並且不忽略通過上下文菜單打開鏈接（以及任何其他打開鏈接的方式）？

Answer 1

即使用戶點擊了錯誤的按鈕，您也可以強制打開鏈接，這樣您就可以確保實際的點擊次數

編輯1：

出於某種原因，contextmenu 事件觸發了兩次，所以我建議您處理該問題我嘗試刪除事件傳播並對其進行調查，但什么也沒發現

 const a = document.querySelector('a'); // left, right, middle Clicks const events = ['click', 'contextmenu', 'auxclick'] // You can add more events if you feel the need to const cb = (clickType, elem) => { console.log(clickType); console.log(elem.href); // Open link and do the post request here } events.forEach(eve => { a.addEventListener(eve, (e) => { e.preventDefault(); cb(e.which, a); }) })

 <a href="https://stackoverflow.com/">click</a>