有没有办法在 amp-script (javascript) 中触发鼠标悬停事件?
Is there is a way to fire mouseover event in amp-script (javascript)?
AMP 文档中有一些使用 Javascript 和 Web Worker 的示例。
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] Blocked 2 attempts to modify DOM element children, innerHTML, or the like. For variable-sized containers, a user action has to happen first.
[amp-script] amp-script[script="hello-world"].js was terminated due to illegal mutation.
请注意,我想避免使用 Jquery
您可以在 EventListener 中使用 "mouseenter"
:https://developer.mozilla.org/fr/docs/Web/API/Element/mouseover_event
AMP 文档中有一些使用 Javascript 和 Web Worker 的示例。 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] Blocked 2 attempts to modify DOM element children, innerHTML, or the like. For variable-sized containers, a user action has to happen first.
[amp-script] amp-script[script="hello-world"].js was terminated due to illegal mutation.
请注意,我想避免使用 Jquery
您可以在 EventListener 中使用 "mouseenter"
:https://developer.mozilla.org/fr/docs/Web/API/Element/mouseover_event