榆树 - 如何在外部点击关闭模态窗口

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之后的行中in因为它会关闭模态，即使我点击它的内部。

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

Answer 1

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

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

Answer 2

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"
          , E.onWithOptions
              "click"
              {stopPropagation = True, preventDefault = False}
              (succeed NoOp)
          ]
          <|
          [ H.div [A.class "textarea-editor-modal-title"] [H.text heading]
          ] ++ inputs ++ [buttons]
      ]

我跟着（@Simon H）评论，它的确有效！ （如果我在包装器上也使用E.onMouseDown ，则仅适用于"mousedown" ，但如果我在两个地方使用click也可以使用）