账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何在html中自定义touch事件
    53
    0

    1.正在做app的项目,项目中有很多onclick事件,我有想法使用touch事件代替,因为有很多处需要做修改,在想能否简单的实现,在dom元素原型上绑定类似于onclick事件的实现。

    <div id="0"  onclick="openPage(id)"> </div>

    变为

    <div id="0"  ontap="openPage(id)"> </div>

    tap方法

        function tap(ele, touchFn) {
          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) {
              touchFn();
            }
    
          })
        }

    2.尝试了可以定义到原型上,非我所要

    Object.prototype.tap1 = tap;

    可以这样使用

     var btn = document.getElementById('btn1');
    
            tap1(btn, function() {
                alert(1)
            })

    3.问,我如何绑定原型,设置公共的方法函数,可以使得在html中可以这样使用<div id="1" tap="func(id)"></div>,方便修改,或者有其他实现的方式请告知。

    更新- 2018.7.19

        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)
        })
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部