Is this a proper way to cancel an onMouseOver which uses setTimeout? (Vanilla JS)
Response to your prompt


  Due to my lack of knowledge in JS I would like to know if this is a proper solution.


This code sets attributes on the elements to store properties. While this works, it technically leads to invalid HTML1. Alternatives include using data attributes and setting properties on the variable representing the element. See responses to Custom attributes - Yea or nay? and  Associate Data With HTML Element (without jQuery)

Other review feedback

Many developers believe it is good to move all JavaScript code out of the markup. So instead of the onmouseover=... and onmouseout=... attributes, you could register those event handlers in the JavaScript using EventTarget.addEventListener()

document.addEventListener('DOMContentLoaded', function() {
  var image = document.getElementById('123');
  image.addEventListener('mouseover', rollover);
  image.addEventListener('mouseout', cancel);
});


With an approach like this, the this keyword inside the functions rollover and cancel refers to the element, so there isn't a need to accept the element as a parameter. If you did want to pass parameters to those functions, it could be achieved using partially applied-functions with Function.bind():

  //set context of 'this' to the image and pass string literal '123' as the first parameter
  image.addEventListener('mouseover', rollover.bind(image, '123'));




The id attribute can be used instead of .getAttribute('id').

So instead of this line:


var id = element.getAttribute("id");



the same can easily be achieved with:

var id = element.id;


This may make assigning that value to a new variable superfluous. 

1https://stackoverflow.com/a/13041243/1575353