移动端长按事件操作
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端长按事件操作相关的知识,希望对你有一定的参考价值。
之前在公司项目上用到长按,也用过jq mobile,好像与后端用的冲突,就没用。
这个是长按当前的,当前DOM操作。
布局
<ul id="lis"> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>
样式
#lis li { width: 50px; height: 50px; border: 1px solid #000; margin: 0 10px 15px; float: left; list-style-type: none; position: relative; } #lis li span { width: 10px; height: 10px; background-color: red; position: absolute; right: -5px; top: -5px; display: none; z-index: 5; }
js
$(function(){ $(‘#lis li‘).on({ touchstart: function(e){ var _this = $(this) // 获取当前的值 timeOutEvent = setTimeout(function(){ timeOutEvent = 0; _this.children(‘span‘).show(); // 操作当前的值 },800); }, touchmove: function(){ clearTimeout(timeOutEvent); timeOutEvent = 0; } }) $(‘#lis li span‘).on(‘click‘,function(){ $(this).parent().remove(); }) });
以上是关于移动端长按事件操作的主要内容,如果未能解决你的问题,请参考以下文章