Search code examples
javascriptdom-eventsamp-htmlweb-workervirtual-dom

Is there is a way to fire mouseover event in amp-script (javascript)?


There are some examples of using Javascript and Web Workers in AMP Documentation. https://amp.dev/documentation/components/amp-script/?format=websites#script-hash

For example, I have a function that appends H1 after button click fired:

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 Virtual DOM:

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

When I am trying to use mouseover instead of click errors occurs:

[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.

Note that I want to avoid using Jquery


Solution

  • You can use "mouseenter" in your EventListener : https://developer.mozilla.org/fr/docs/Web/API/Element/mouseover_event