如何在on点击事件处理程序中获取目标元素的HTML属性值

你当前的代码没有生效是因为事件解码器没有从点击事件对象中读取目标元素的对应属性，仅直接返回了固定的消息，按以下步骤修改即可：

1. 调整自定义消息结构 #

首先修改你的Msg定义，让HandleClick支持接收元素属性作为参数：

type Msg
    = HandleClick { id : String, name : String }
    -- 其他自定义消息保留即可

2. 重写onClickData自定义属性 #

使用Json解码器从点击事件的target字段中读取你需要的元素属性：

import Json.Decode as Decode
import Html.Events exposing (on)
import Html exposing (Attribute)

onClickData : ({ id : String, name : String } -> msg) -> Attribute msg
onClickData toMsg =
    let
        -- 定义解码器，从事件对象读取目标元素的id、name属性
        elementAttrDecoder =
            Decode.map2 (\id name -> { id = id, name = name })
                (Decode.field "target" (Decode.field "id" Decode.string))
                (Decode.field "target" (Decode.field "name" Decode.string))
    in
    on "click" (Decode.map toMsg elementAttrDecoder)

3. 视图中绑定属性 #

给目标div设置对应的id、name属性，同时绑定我们写好的onClickData：

view model =
    div 
        [ id "your-div-id"
        , name "your-div-name"
        , onClickData HandleClick
        ]
        [ text "点击测试获取属性" ]

4. Update中接收属性值 #

在update分支里就可以直接拿到元素的id、name做业务逻辑处理：

update msg model =
    case msg of
        HandleClick attrs ->
            -- attrs.id 即为点击div的id，attrs.name即为对应name值
            ( { model | lastClickedId = attrs.id }, Cmd.none )
        -- 其他消息处理逻辑

扩展说明 #

如果需要获取其他属性，可自行调整解码器：

• 取data-开头的自定义属性：Decode.field "target" (Decode.field "dataset" (Decode.field "自定义后缀" Decode.string))，比如data-user-id对应的后缀是userId
• 如果属性可能不存在，用Decode.maybe包裹对应的解码逻辑，避免解码失败导致事件无响应

内容的提问来源于stack exchange，提问作者charithreddyv