移动端长按完成删除+动态加载失败显示 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>