0

I would like a mouseover event happening on a css selector while the mouse curser is on a different element. I need to set this up through a custom tag in Google Tag Manager running a js. My idea was:

(function() {   
document.getElementById("atcclick").mouseover();
})();

When I use .click a click on #atcclick is recognized, works perfectly fine! But with .mouseover no mouseover event is recognized. Any idea what I am doing wrong?

Maximilian Gerdau
  • 1
  • 1

2 Answers2

0

Oke thanks to epascarello I got it, this is working:

(function() {   
document.getElementById('atcclick').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
})();
Maximilian Gerdau
  • 1
  • 1
-1

You should use .onmouseover() method instead of .mouseover().

Do something like -

(function() {   
document.getElementById("atcclick").onmouseover = function(){ console.log('on mouseover event')};
})();
<p id="atcclick">This is demo text</p>
Vibhooti Singh Visen
  • 21
  • 4
  • Thanks so much for your reply Vibhooti. Unfortunately the suggestion doesn’t work. .onmouseover cannot be called really, can it? I need to call a mouseover event on a css selector (triggered by a js script). While the actual mouse curser is on a different element. – Maximilian Gerdau May 19 '21 at 20:28
  • It would be like `.onmouseover(EventObjectHere)`, but you would still need to pass in the `EventObject`, so you'll want to do the `.dispatchEvent` way. Your example assigns the Event, but doesn't fire it unless a mouseover occurs. – StackSlave May 19 '21 at 23:27