如何停止用戶點擊的影響？

Question

我正在制作一個 chrome 擴展來編輯單擊的圖像的屬性。 我正在使用一個名為 package 的元素選擇器到 select 圖像（這是通過彈出窗口中的 html 按鈕觸發的）。 該代碼有效，我可以更改圖像的屬性。 然而，package 不會停止與圖像鏈接的任何操作，這通常會導致用戶被帶到新頁面。 如何在用戶按下彈出窗口中的按鈕和選擇圖像之間停止用戶點擊的任何操作？ 先感謝您。

var elementPicker = require('element-picker')

function onClick(elt) {
    [.....]
}
elementPicker.init({ onClick })

Answer 1

我通常不推薦使用這個，但是 CSS pointer-events可以解決這個問題。 這個想法是任何帶有pointer-events:none元素都會忽略任何交互。 這可以阻止默認的 HTML 交互，如<a>或<button>以及附加到元素的任何 javascript 操作。

這是經常與模態 window 一起使用的技術，以防止點擊“穿過”模態周圍的區域。 它也應該適用於您所描述的內容。

您可以使用* {styles...}選擇器在圖像元素或所有元素上設置該樣式。 如果您 go 使用“全部”路由，則需要在擴展接口中仍需要使用“自動”屬性可操作的任何元素上顯式地重新啟用指針事件。

請記住在擴展完成后重置指針事件* {pointer-events: initial;}否則您將讓頁面完全無法操作。

Answer 2

如果有一個事件 object 正在傳遞到 function，那么您可以使用 Event.preventDefault() function。

此 function 停止任何默認行為並允許您以自己的方式處理事件。

參考： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault