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)
    })
Menu