有没有办法在 amp-script (javascript) 中触发 mouseover 事件？答案

【问题标题】：Is there is a way to fire mouseover event in amp-script (javascript)?有没有办法在 amp-script (javascript) 中触发 mouseover 事件？
【发布时间】：2021-07-28 22:27:53
【问题描述】：

AMP 文档中有一些使用 Javascript 和 Web Workers 的示例。 https://amp.dev/documentation/components/amp-script/?format=websites#script-hash

例如，我有一个在按钮单击触发后附加 H1 的函数：

JS：

const button = document.getElementsByClassName('hello-url')[0];

button.addEventListener('click', () => {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.body.appendChild(h1);
});

AMP 虚拟 DOM：

<amp-script script="hello-world" class="sample">
  <button class="hello-url">Short button</button>
</amp-script>

当我尝试使用 mouseover 而不是 click 时出现错误：

[amp-script] 阻止了 2 次修改 DOM 元素子元素、innerHTML 等的尝试。对于可变大小的容器，必须首先发生用户操作。

[amp-script] amp-script[script="hello-world"].js 由于非法突变而被终止。

请注意，我想避免使用 Jquery

【问题讨论】：

标签： javascript dom-events amp-html web-worker virtual-dom

【解决方案1】：

您可以在 EventListener 中使用"mouseenter"：https://developer.mozilla.org/fr/docs/Web/API/Element/mouseover_event

【讨论】：

不幸的是同样的错误：button.addEventListener('mouseenter', () => { ... });
确实，我做了一些研究，如果您的元素没有固定大小，您似乎会遇到此错误：<amp-script layout="fixed" height="300" script="myscript"></amp-script>。文档here
行得通！唯一的问题是宽度也必须指定。顺便说一句layout="responsive" 也可以。