有没有办法让点击button_冒泡到父元素？

Question

这是我的代码：

...
<div data-action="click->eta#advance" data-value="2hr">
  <%= button_to '2 Hours', set_eta_order_path(@order), method: :post, params: { ... } %>
</div>
...
(repeated several times as a list)

单击按钮时可以工作，但事件不会向上冒泡到 div，因此不会调用 div 上的事件处理程序。

有一个这些 div 的列表作为民意调查的选项，并且每个 div 在单击时都应前进到下一页并保存您单击的结果。问题在于，民意调查的页面几乎完全在客户端中呈现（每个页面没有不同的路由），并使用 Stimulus.js 进行处理，并在服务器中保存结果。

有没有办法让这个布局与自身兼容，如果没有，有什么解决方法吗？

Answer 1

您必须声明您的

data-controller

:

<div data-controller="eta">

  <div data-action="click->eta#advance" data-eta-time-param="1hr">
    <%= button_to "1 Hour", set_eta_order_path(@order) %>
  </div>

  <div data-action="click->eta#advance" data-eta-time-param="2hr">
    <%= button_to "2 Hours", set_eta_order_path(@order) %>
  </div>

</div>

// app/javascript/controllers/eta_controller.rb

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="eta"
export default class extends Controller {
  advance(event) {
    console.log(event.params);
  }
}