javascript - 榆木-如何在外部单击时关闭模式窗口

这是代码：

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区分内部内部或外部的点击。

最佳答案

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

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

关于javascript - 榆木-如何在外部单击时关闭模式窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51114136/