使用 on "click" 事件处理程序访问属性名称

Question

我试图在单击时访问元素 HTML 属性。我发现 Events.onClick 只会 return event.target.value 并且我需要使用 Events.on 来处理自定义行为。

我需要的是：当点击 div 我应该能够访问它的 HTML 属性，现在 id 和 name 并发送这个值更新一些消息。

我这样试过：

onClickData : msg -> Attribute msg
onClickData handler =
    on "click" (Decode.succeed handler )
---
view: ...
    ....
    div[onClickData HandleClick] []

这样我就可以在单击 div 时触发 HandleClick 操作，但无法访问其 HTML 属性。

Answer 1

正如@glennsl 所指出的，您通常会想做更多类似这样的事情：

view identification =
    button [ id identification, onClick (MyMsg identification) ] 
        [ text "Click me" 
        ]

即您可以将数据直接传递到您的 Msg 类型中。

也就是说，在一些不寻常的互操作情况下您可能想要执行此操作。一般原则是您可以从 event.currentTarget 获取您绑定事件处理程序的元素，因此您可以使用以下解码器：

decodeProperty : String -> Decoder a -> Decoder a 
decodeProperty property decoder = 
   Decode.at ["currentTarget", property] decoder


--- use

onClickId : (String -> msg) -> Attribute msg
onClickId tagger =
    on "click" (Decode.map tagger (decodeProperty "id"))

使用 on "click" 事件处理程序访问属性名称

Access attribute name with on "click" event handler

elm