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

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 中的“鼠标悬停”事件？为什么 Elm 需要阻止这样的事件？

Answer 1

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

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

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