如何触发点击事件答案

【问题标题】：How to trigger click event如何触发点击事件
【发布时间】：2016-12-26 13:43:40
【问题描述】：

在简单的 html + js 应用程序中，当我需要打开一些交互式输入元素（例如 input[type="file"] 或 input[type="date"] 或 input[type="color"]）的任何非标准方式（使用按钮或页面加载）的对话时最困难的方式是在上述元素上trigger click event。但是我找不到在纯榆树（没有端口）中做到这一点的方法。我看到 DOM 事件操作有 focus trigger，但没有 click。我错过了什么吗？不就是“榆树之道”吗？

【问题讨论】：

Elm 不能触发 DOM 事件，它的设计目的不是用于低级 DOM 操作。使用端口或考虑更改架构中的某些内容。
在此处仔细考虑您的设计，因为只有 Chrome 内置了日期选择器小部件

标签： html dom dom-events elm

【解决方案1】：

您可以（ab）使用Html.attribute 可以采用任意字符串（即Html.attribute "onclick" "javascript:someFunction(this)"）的方式。在一些情况下，这是合理的，因为它可以提供最少的摩擦。例如，如果您想要一个专注于隐藏文件输入的按钮，并且它被很好地封装在一个组件/视图文件中，它始终是一个按钮后跟一个文件输入，这是有道理的：

import Html exposing (..)
import Html.Attributes as Attr exposing (..)
import Html.Events exposing (on)


filePick : Html msg
filePick =
    div [ class "file-pick-wrapper" ]
        [ button 
            [ type_ "button"
            , attribute "onclick" "javascript:this.nextElementSibling.click()" 
            ] 
            [ text "Choose a File" ]
        , input
            [ type_ "file"
            , on "change" someMsgDecoder
            , style [ ( "display", "none" ) ]
            ]
            []
        ]

从那里您可以让someMsgDecoder 使用Json.Decode 读取at [ "target", "files", "0", "name" ] 作为文件名。

【讨论】：

【解决方案2】：

阅读 File 元素上的 MDN，我看到他们建议使用 <label> 来触发没有 JavaScript 的元素：

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>

elm-fileinput https://developer.mozilla.org/en/docs/Using_files_from_web_applications

找到<input type="file"> 的库：https://github.com/lovasoa/elm-fileinput。

我还提出了一个使用此库中的解码器的工作示例：https://runelm.io/c/ie0。

【讨论】：