JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id='a'>
    Click ME from mouse and touch device
  </div>
  <div id='b'class='output'>
  
  </div>
  <style>
    div#a {
      width: 100px;
      height: 100px;
      background: black;
      display: inline-block;
      vertical-align: top;
      user-select: none;
      color: white;
    }
    div#b {
      display: inline-block;
      width: 200px;
      height: 300px;
      margin-left: 20px;
      overflow: hidden;
      }
    

  </style>

</body>

JavaScript

/*
document.getElementById("a").addEventListener("touchstart", function(event) {
  document.getElementsByClassName("output")[0].innerText =  "\n touchstart " +
  document.getElementsByClassName("output")[0].innerText;
 // event.preventDefault();
});
*/

document.getElementById("a").ontouchstart = function(event) {
  document.getElementsByClassName("output")[0].innerText =  "\n touchstart " +
  document.getElementsByClassName("output")[0].innerText;
  //event.preventDefault();
  //return false;
}

/*
document.getElementById("a").addEventListener("touchend", function(event) {
  document.getElementsByClassName("output")[0].innerText =  "\n touchend " +
  document.getElementsByClassName("output")[0].innerText;
//event.preventDefault();
});
*/

document.getElementById("a").ontouchend = function(event) {
  document.getElementsByClassName("output")[0].innerText =  "\n touchend " +
  document.getElementsByClassName("output")[0].innerText;
  //event.preventDefault();
  return false;
}


document.getElementById("a").addEventListener("mousedown", function(event) {
  document.getElementsByClassName("output")[0].innerText =
  " \n mousedown " + document.getElementsByClassName("output")[0].innerText;
});


document.getElementById("a").addEventListener("mouseup", function() {
  document.getElementsByClassName("output")[0].innerText =
  " \n mouseup " + document.getElementsByClassName("output")[0].innerText;
});