使用 Html.attribute 和 "onmouseover" 的 Elm 不起作用

Question

我想添加 onmouseover 来改变按钮的背景颜色。我不需要使用 Html.Events.onMouseOver 因为这是一项非常简单的任务。我不想使用其他外部库。

我用

创建了 Html.attribute

div
[
   -- Html.Event.onMouserOver NoUse
   Html.attribute "onmouseover"  "$(this).css('background','green');"
]
[ ... ]

当我向 Elm 添加未知属性时。 Elm 为属性添加 "data-" 前缀因此，当我编译代码时，它将被翻译成 Html

<div data-onmouseover="$(this).css('background','green');">...</div>

所以 "onmouseover" 不起作用！

我如何破解 Elm 中的 "mouseover" 事件？和为什么 Elm 需要阻止这样的事件？

Answer 1

Elm 这样做是为了避免脚本注入攻击（例如：如果您从用户那里获取一个字符串并将其作为此处的值，他们将无法编写一些恶意 JS 并让您的页面执行它）。

正确的解决方案是使用 Html.Events.onMouseOver 和 Elm 代码（包括，如果你确实需要任意 JS，端口）。你说你不需要使用它，但你在 Elm 中使用它。

即使你可以做你想做的事，它实际上不会按照你想要的方式工作：Elm 控制页面的 DOM，并可能破坏和重新创建元素，这意味着您在 JS 中所做的更改可能会任意丢失。

Elm using Html.attribute with "onmouseover" does not work