移动端长按完成删除+动态加载失败显示 is not defined

之前删除功能都在手机端做的,移动端都是用js拼接得页面,现在客户要在手机端得草稿箱实现长按删除功能

1.js里写方法显示 is not defined

因为手机端页面是动态加载得,不是固定得,所以后端用innerHTML方法拼接得
现在要实现删除,写了一个onclick方法显示is not defined

百度得知,这块是加载完读不到方法,所以不能直接写

<script type="text/javascript">
  function  up(){
  }
}
script>

改成下面

<script type="text/javascript">
   up = function () {
      
    }
script>

2.onmousedow动态模拟长按

<script type="text/javascript">
  <div onmousedown="down()" onmouseup="up()">长按事件</div>

 		function down(){
             time=setTimeout(()=>{
                 console.log("长按事件");
             },1000)
        }
        function up(){
            clearTimeout(time);
        }
script>

这样可以实现长按一秒后,模拟删除了

3.移动端onmouseout代替onmousedow

pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

这样我们方法最终是

<script type="text/javascript">
  <div ontouchstart="down()" ontouchend="up()">长按事件</div>

 		down = function (th) {
        time = setTimeout(() => {
            layer.confirm('真的要删除么', {
                offset: '15px',
                icon: 0,
            }, function (index) {
                //ajax请求

            });
        }, 1000)
    }
    up = function () {
        clearTimeout(time);
    }
script>
 

你可能感兴趣的:(随笔记录,大前端,前端框架)