调度的点击事件:阻止浏览器跳转到点击的元素

Question

我在WooCommerce中有一个非常复杂的产品，它有一个复杂的变体选择器。

为了简化事情，你只需点击你喜欢的变体的照片(页面上的任何地方(，并为你选择它。

所以我只是在照片上添加了一个事件监听器，只要你点击图像，就会触发点击正确的变化复选框：

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

这很好，但浏览器会自动跳转到原始变体选择器，因为它在单击事件之后/期间会聚焦。这在用户体验方面相当令人困惑。

所以我花了几个小时试图找到一个解决方案。但到目前为止，我唯一糟糕的成功是通过将其添加到eventListener:中，使其在Safari中工作

Variation1.blur()

我发现它在其他浏览器中不起作用，因为焦点事件直接发生在mousedown事件之后。(在Safari中，它是在点击之后。(

然而，当我尝试单独触发mousedown函数(使用"preventDefault"(时，根本没有选择任何内容。

你知道我如何触发点击并阻止聚焦点击的元素，或者其他阻止浏览器跳转的解决方法吗？

PS：我只使用了8个小时的JavaScript，请宽恕我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