JSFiddle - React, Tailwind, and code Playground

HTML

<div id="backface"></div>
<div id="overlay"></div>

<div id="console"></div>

CSS

#backface {
    background: red;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
}

#overlay {
    top: 80px;
    left: 80px;
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    opacity: 0.5;
    pointer-events: none;
}

#console {
    padding: 20px;
    margin: 20px;
    overflow: auto;
    border: 20px solid black;
    height: 240px;
    clear: both;
    background: white;
    margin-top: 200px;
  }

JavaScript

var consoleElem = document.getElementById('console');

    var console = {
      log: function() {
        var div = document.createElement('div'),
          text = Array.prototype.slice.call(arguments, 0).join(' ');

        window.console.log.apply(window.console, arguments);
        div.textContent = text;
        consoleElem.appendChild(div);
        consoleElem.scrollTop = consoleElem.scrollHeight;
      }
    };

var backface = document.querySelector('#backface'),
    overlay = document.querySelector('#overlay');

backface.addEventListener('mousemove', function() {
    console.log('[backface] mousemove');
});

overlay.addEventListener('mousemove', function() {
    console.log('[overlay] mousemove');
});


backface.addEventListener('touchmove', function() {
    console.log('[backface] touchmove');
});

overlay.addEventListener('touchmove', function() {
    console.log('[overlay] touchmove');
});

backface.addEventListener('touchstart', function() {
    console.log('[backface] touchstart');
});

overlay.addEventListener('touchstart', function() {
    console.log('[overlay] touchstart');
});


backface.addEventListener('touchend', function() {
    console.log('[backface] touchend');
});

overlay.addEventListener('touchend', function() {
    console.log('[overlay] touchend');
});