I wanted to make a screencast of a browser session on Ubuntu using RecordMyDesktop but it did not provide visual clues for the mouse click – so I created this little helper script.

document.addEventListener('click', function (event) {

    var config = {
        color: 'red',
        radius: 20
    };

    var halfRadius = config.radius / 2;
    var circle = document.createElement('div');

    with (circle.style) { // yes, `with`! what are you going to do now? o_O
      position = 'absolute';
      left = (event.pageX - halfRadius) + 'px';
      top = (event.pageY - halfRadius) + 'px';
      width = config.radius + 'px';
      height = config.radius + 'px';
      background = config.color;
      borderRadius = '50%';
      zIndex = Infinity;
      transition = 'opacity .5s ease-in-out';
    }

    circle.addEventListener('transitionend', function () {
        console.log(123);
        circle.remove();
    });

    document.body.appendChild(circle);

    setTimeout(function () {
        circle.style.opacity = 0;
    }, 50);
});