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

本文介绍了如何在移动端实现长按删除功能。首先解决了JS方法加载后无法读取的问题，接着通过onmousedown和ontouchstart事件模拟长按效果，并利用setTimeout实现延迟确认删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前删除功能都在手机端做的，移动端都是用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>