防止滑动的时候触发点击事件

手机端在滑动过程中容易引发点击事件

解决方案:

重新封装一个点击函数

//防止滑动的时候触发点击事件
function tap(sprite, cb) {
var tapStartTime = 0,
tapEndTime = 0,
tapTime = 300, //tap等待时间,在此事件下松开可触发方法
tapStartClientX = 0,
tapStartClientY = 0,
tapEndClientX = 0,
tapEndClientY = 0,
tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消(根据chrome浏览器默认的判断取消点击的移动量)
cancleClick = false;
$(document).on(‘touchstart‘, sprite, function() {
tapStartTime = event.timeStamp;
var touch = event.changedTouches[0];
tapStartClientX = touch.clientX;
tapStartClientY = touch.clientY;
cancleClick = false;
})
$(document).on(‘touchmove‘, sprite, function() {
var touch = event.changedTouches[0];
tapEndClientX = touch.clientX;
tapEndClientY = touch.clientY;
if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
cancleClick = true;
}
})
$(document).on(‘touchend‘, sprite, function() {
var _this = $(this);
tapEndTime = event.timeStamp;
if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
cb(_this);
}
})
}
tap(".gx_list li", function(_this) {
    var rid = _this.attr("data-i");
    console.log(rid);
})

  

原文地址:https://www.cnblogs.com/sherry-long/p/10762789.html

时间: 2024-11-07 11:25:29

防止滑动的时候触发点击事件的相关文章

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

view.performClick()触发点击事件

1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_h

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

解决JavaScript拖动时同时触发点击事件的BUG

在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件,造成不好的用户体验 bug的原因 一个完整的click事件是包含 mousedown,mouseup 两个事件的,而拖拽一个元素时,包含下面三个事件: mousedown,mousemove,mouseup, 所以我们在拖拽一个元素结束后,如果此元素上面绑定了点击事件, 就会同时触发元素的点击事件

AndroidのListView之滑动列表项(点击事件和滑动事件共存) - bvin

返回脚本百事通 这里正好在项目有这么一个bt的需求,如下图ListView的item可以响应点击事件也可以响应item的左右滑动事件,两个事件可以相互独立互不影响. 听说iphone的list选项就有这样bt的功能,安卓版的手机QQ和微信和QQ通讯录也有类似的效果,在网上各种寻早方案都试过,要不只能滑动不能点击要么就只能点击不能滑动,而且操作很不灵敏,网上的代码都是在itemView的onTouch方法里处理,判断down和up的像素差.其实这样操作相当不便,down-up这样的其实只能算拖动事

触发点击事件,接受后台参数,并把隐藏的div显示出来

1点击事件 1.1重点112和114行,112用的是正则表达式,114是加一些查找的限制,如是中文并且得3个中文字符才会自动查询.没有这些限制的话,键盘敲一次,就会查询一次,特别麻烦!!! 1.2 注意json传参数的方式 2.1接受后台参数 先把要查询的公司名字发送给后台,通过模糊查询返回一个lis给前端 把查询到的值通过不同的id.来接受. 3.1并把隐藏的div显示出来 这里用 $("#id").show();是显示不了的.因为在要显示的字段前已经被 220行这句话给全部隐藏了

RadioButtonList绑定后台数据,触发点击事件

首先前台页面放置一个RadioButtonList 控件 <asp:RadioButtonList runat="server" ID="RadioButtonList1" BorderStyle="None" RepeatColumns="3" CssClass="" RepeatLayout="Flow" AutoPostBack="true" OnSele

button按钮触发点击事件后出现自动跳转问题

在项目中遇到在点击+号按钮后出现跳转.该button在form表单内,分析原因得知,触发事件后button按钮自动提交了表单,从而出现跳转. 查找手册得知button type有三个属性值,其中默认为submit,所以在未添加type属性时,button默认为submit. 此问题在button中添加type="button"则恢复正常. 值 描述 submit 默认.按钮是提交按钮. button 按钮时可点击的按钮. reset 按钮是重置按钮(清空数据). 原文地址:https:

为啥使用Iscroll.js之后,a不能触发点击事件?

原因:是iscroll.js阻止了a的行为. 解决方法:打开iscroll-probe.js,然后找到preventDefaultException方法. 然后修改为: // preventDefault: true,preventDefault: false,//(把这句加上去哦)preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ },  //(这个后面加|A,因为iscroll阻止了A的默认事件)