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

Question

我想添加 onmouseover 来改变 Button 的背景颜色。我不需要使用 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 中的“鼠标悬停”事件？和为什么 Elm 需要阻止这样的事件？

Answer 1

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

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

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