How to customize touch events in html

1. I am working on an app project, and there are many onclick events in the project. I have an idea to use the touch event instead, because there are a lot of things that need to be modified. I wonder if it can be easily implemented, binding an implementation similar to the onclick event on the dom element prototype.

such as

    HTMLElement.prototype.ontap = function (fn) {
      if (this.getAttribute("ontap")) {
        var FnStr = this.getAttribute("ontap").split("(")[0];
        console.log(FnStr);
      }

      var ele = this;
      var SupportsTouches = ("createTouch" in document),//  
        StartEvent = SupportsTouches ? "touchstart" : "mousedown",//   
        EndEvent = SupportsTouches ? "touchend" : "mouseup";

      var startTime = null,
        endTime = null;
      ele.addEventListener(StartEvent, function (e) {
        startTime = e.timeStamp
      })
      ele.addEventListener(EndEvent, function (e) {
        endTime = e.timeStamp
        // console.log(EndEvent+"="+(endTime-startTime))
        if (endTime - startTime < 500) {
          fn();
        }
      })
    };
    
     document.querySelector("button").ontap(function () {
      alert(1)
    })
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf5528-31f50.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf5528-31f50.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?