将事件处理程序添加到 HTML 进度标签

Question

我正在尝试为 HTML 标记分配一个事件处理程序，我想在值更改时触发一个函数，但是 none 事件被触发了..

<progress
   id="side-cart__progress-bar" 
   class="side-cart__progress-bar"
   first-gift="{{ section.settings.product_1_progress_bar.id }}"
   first-goal="{{ first_goal }}"
   second-gift="{{ section.settings.product_2_progress_bar.id }}"
   second-goal="{{ second_goal }}"
   final-gift="{{  section.settings.product_3_progress_bar.id}}" 
   max="{{ final_goal }}" 
   value="{{ cart.total_price }}"
  >
</progress>

这是我的 JS：

const $sideCartProgressBar = document.querySelector("#side-cart__progress-bar")

$sideCartProgressBar.addEventListener("change", function(){
   console.log('Hello')
})

Answer 1

<progress> 不支持 change 事件侦听器。此外，据我所知，当您更改其 value.

时，它不会引发任何事件

你可以看到，例如，MDN documents the existence of the change event on <select> but there is no similar documentation of change event on <progress>, supporting my claim that there is no such event for <progress>。事实上，根本没有记录 <progress> 的事件（除了继承的 DOM 事件）。

您应该找到其他方法来执行此操作，例如修改更新 cart.total_price 的代码，以便在达到 final_goal 时执行一些额外操作。

将事件处理程序添加到 HTML 进度标签

Add event handler to HTML Progress tag

html

javascript

liquid

shopify