如何使用 on-tap='node_action' 触发元素的点击事件？答案

【问题标题】：How to trigger a tap event for element with on-tap='node_action'?如何使用 on-tap='node_action' 触发元素的点击事件？
【发布时间】：2015-05-07 16:35:31
【问题描述】：

通常我可以使用fire 来激活处理程序，但在这种情况下，我需要在事件处理程序中使用e.context 获取完整的项目数据。

更新 08.05.15

详细说明
为什么我不能直接解雇node_action？
我有一个项目列表，点击时我想在项目附近的浮动块中显示项目相关信息。所以我对每个项目都有on-tap='node_action'，我有：

@on 'node_action', (e)->
  item = e.context — then I can use item.id to load data
  item_div = e.node — then I can use item_div.top_y() to show floating menu
                      on the same level on the page with the item div

为什么需要触发？
如果我想在那个浮动菜单上工作，我不想每次刷新页面后都手动点击项目，所以我通常会通过触发事件来自动化它。

是的，我可以在这里用准备好的事件来开火

e =
  context: ractive.get 'items.0'
  node: ractive.find '.items .line:first'
ractive.fire('node_action', e)

但列表中的项目可以排序、过滤和更改。

最好有这样的东西：

ractive.find('.items .line:first').tap()

或

ractive.find('.items .line:first').trigger 'tap'

或许

ractive.find('.items .line:first').fire 'node_action'

【问题讨论】：

标签： javascript dom-events ractivejs

【解决方案1】：

在响应式应用程序中，当您想要获取 DOM 节点来获取数据时，这通常表明出现问题。但没有更多细节很难说。

要回答我认为是您的问题，您可以使用以下内容从节点获取上下文、键路径和索引，类似于您从事件上下文中获取的内容：

var info = Ractive.getNodeInfo(node);

【讨论】：

>你想要一个 DOM 节点来获取数据——实际上我并不想要它。 getNodeInfo 对于准备触发事件很有用，但它不像触发事件那么简单。
为问题添加了详细描述

【解决方案2】：

终于发现，Rich Harris 的 Simulant.js 实际上是可以实现的。
它不支持tap 事件，所以我添加了一个小的 jQuery 插件

# Ractive trigger
# btn.r_trigger 'tap'
# btn.r_trigger 'click', {button:1, which:2}
$.fn.r_trigger = (event_name, opt)->
    el = @[0]
    switch event_name
        when 'tap'
            simulant.fire(el, 'mousedown', opt)
            simulant.fire(el, 'click', opt)
        else
            simulant.fire(el, event_name, opt)

【讨论】：