調度點擊事件：阻止瀏覽器跳轉到點擊的元素

Question

我在 WooCommerce 中有一個非常復雜的產品，帶有一個復雜的變體選擇器。

為了簡化事情，您只需單擊您喜歡的變體照片（頁面上的任何位置）並為您選擇它。

所以我只是在照片上添加了一個事件監聽器，只要你點擊圖片，就會觸發點擊正確的變化復選框：

Photo_Variation1.addEventListener('click', () => {
    Variation1.click()
})

這很好用，但是瀏覽器會自動跳轉到原來的變體選擇器——因為它會在點擊事件之后/期間獲得焦點。 這在用戶體驗方面相當令人困惑。

所以我嘗試了幾個小時來尋找解決方案。 但到目前為止，我唯一糟糕的成功是將其添加到 eventListener 中，使其在 Safari 中工作：

Variation1.blur()

我發現它在其他瀏覽器中不起作用，因為焦點事件在 mousedown 事件之后直接發生。 （在 Safari 中，它在點擊之后。）

但是，當我嘗試單獨觸發mousedown function （帶有"preventDefault" ）時，根本沒有選擇任何內容。

您是否知道如何觸發單擊並防止聚焦單擊的元素或阻止瀏覽器跳動的任何其他解決方法？

PS：我使用 JavaScript 僅 8 小時，請原諒。 :D

Answer 1

您可以通過執行以下操作以編程方式將復選框設置為選中：

Photo_Variation1.addEventListener('click', () => {
     var myCheckBox = document.getElementById("myCheckBoxId");

    if(myCheckBox.checked) {
        myCheckBox.checked = false;
    } else {
        myCheckBox.checked = true;
    }
})

這里還有更多信息可以幫助您。 https://www.w3schools.com/jsref/prop_checkbox_checked.asp