javascript - Elm - 如何在外部点击时关闭模式窗口

Question

这是代码:

modalWindow :
  Lang -> String ->
  Action -> Action ->
  List (Html Action) -> Html Action
modalWindow lang heading accept close inputs =
  let
    cancel = case lang of
      Es -> "Cancelar"
      En -> "Cancel"
    buttons =
      H.div [A.class "flex-center-div"]
        [ H.input
            [ A.class "textarea-editor-modal-button"
            , A.type_ "button"
            , A.value "OK"
            , E.onClick accept
            ] []
        , H.input
            [ A.class "textarea-editor-modal-button"
            , A.type_ "button"
            , A.value cancel
            , E.onClick close
            ] []
        ]
  in
    H.div [A.class "textarea-editor-modal-window", E.onClick close]
      [ H.div [A.class "textarea-editor-modal-content"] <|
          [ H.div [A.class "textarea-editor-modal-title"] [H.text heading] ]
          ++ inputs ++ [buttons]
      ]

问题出在 in 之后的行中，因为即使我单击模态框内部，它也会关闭模态框。

根据https://www.w3schools.com/howto/howto_css_modals.asp我应该使用 event.target 来区分内部部分内部或外部的点击。

Answer 1

您的建议可行，或者您可以将 onMouseDown 事件处理程序添加到内部的第一个 div，并使用始终成功的解码器和 preventDefault = True。唯一的问题是您需要添加 NoOp 消息

mouseDownPreventDefault : msg -> Attribute msg
mouseDownPreventDefault noop =
    onWithOptions "mousedown"
        { stopPropagation = False
        , preventDefault = True
        }
        (Json.Decode.succeed noop)