移动web开发 - 移动web端滚动后立即触发点击事件
本文介绍了移动web开发 - 移动web端滚动后立即触发点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在页面中滚动完成后便会立刻触发点击事件的跳转,
在此页面使用了 swiper,iscroll,vue
iscroll使用的是iscroll-lite版本
代码如下:
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title>首页</title>
<link rel="stylesheet" href="./public/css/index.css" />
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
</head>
<body>
<!-- <script type="text/javascript" src="../alloylever/dist/alloy_lever.js"></script> --> <!-- 移动浏览器调试工具 -->
<div id="index_view">
<header>
<span class="city" @click="city_link">
<img src="./image/address.png" alt="" />
<a class="city-name"></a>
</span>
<input type="text" placeholder="搜索职位或公司" class="index-search" readonly @click="search_link"/>
</header>
<!-- 第一层滑动 -->
<!-- 最外层的分页器 -->
<div class="type-pagination">
<div class="jobType">
<!-- 职位分类 -->
<span v-for="type in type" v-text="type.name" :id="type.Id"></span>
</div>
<!-- 定制职位类别 -->
<div class="set-type" @click="jobtype_link">
+
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="n in type.length" class="swiper-slide" :class="'swiper-slide'+n">
<div class="slide-scroll">
<!-- 下拉刷新 -->
<div class="pull-refresh">
<img v-if="ajax_status == 1 || ajax_status == 3" :src="ajax_status == 1 ? './public/img/pulldown.png' : (ajax_status == 3 ? './public/img/finish.png' : '') " alt="" />
<div class="spinner" v-if="ajax_status == 2">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div class="refresh-status">
<p v-text="ajax_status == 1 ?'下拉刷新' : (ajax_status == 2 ? '正在刷新' : '刷新完成')">下拉刷新</p>
<p v-text="'最后更新' + (new Date().getHours() > 10 ? new Date().getHours() : '0' + new Date().getHours())+':'+ (new Date().getMinutes() > 10 ? new Date().getMinutes() : '0'+new Date().getMinutes())">最后更新 :</p>
</div>
</div>
<!-- 第二层滑动 -->
<div class="banner" v-if="banner != null && banner != ''">
<div class="banner-wrapper">
<div class="banner-slide" v-for="banner in banner">
<a :href="banner.type == 3 ? '/h5/jobDetails.html?jobId='+banner.data : (banner.type == 4 ? '/h5/company.html?companyId'+banner.data : (banner.type == 2 ? banner.data : ''))"><img :src="banner.banner" alt="" /></a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div style="position:relative;" class="select-wrapper">
<!-- 条件筛选 -->
<div class="select">
<!-- 区域筛选 -->
<span count="true">
<p><a>区域</a> <img src="./image/bottom.png" class="img"></p>
<div class="area option" :class="'area'+n">
<ul>
<li v-for="area in area" v-text="area.name" :areaid="area.Id" @click.stop="set_id('area',area.Id,area.name,$event)"></li>
</ul>
</div>
</span>
<!-- 结算方式筛选 -->
<span count="true">
<p><a>结算方式</a> <img src="./image/bottom.png" class="img"></p>
<div class="salaryType option" :class="'salaryType'+n">
<ul>
<li v-for="type in salaryMethods" v-text="type.name" :salaryid="type.Id" @click.stop="set_id('salaryType',type.Id,type.name,$event)"></li>
</ul>
</div>
</span>
<!-- 福利筛选 -->
<span count="true">
<p><a>福利</a> <img src="./image/bottom.png" class="img"></p>
<div class="welfare option" :class="'welfare'+n">
<ul>
<li v-for="welfare in welfare" v-text="welfare.name" :welfareid="welfare.Id" @click.stop="set_id('welfare',welfare.Id,welfare.name,$event)"></li>
</ul>
</div>
</span>
<!-- 排序方式 -->
<span count="true">
<p><a>排序 </a><img src="./image/bottom.png" class="img"></p>
<div class="sort option" :class="'sort'+n">
<ul>
<li v-for="order in order" v-text="order.name" :orderid="order.Id" @click.stop="set_id('sort',order.Id,order.name,$event)">不限</li>
</ul>
</div>
</span>
</div>
<!-- 职位列表 -->
<ul class="v-group">
<li v-for="list in list" :jobId="list.jobId" >
<div class="job-logo">
<img :src="list.logoURL">
</div>
<div class="job-content">
<p v-text="list.name"></p>
<p>
<img src="">
<span v-text="list.district"></span>
<span v-text="Math.floor((list.distance/1000)) > 1 ? '( 距我'+(list.distance/1000).toFixed(1)+'km )' : '( 距我'+list.distance+'m )'"></span>
<em class="v-pull-right" v-text="list.salary"></em>
</p>
<p>
<img src="">
<span v-text="list.validateTime"></span>
<span class="v-pull-right" v-text="list.billingCycle"></span>
</p>
<div>
<p v-if="list.redEnvelope"><img src="./public/img/Red-envelopes.png" alt="" style="width:0.6rem;"/><span v-text="list.redenvelopTips"></span></p>
<p v-if="list.welfareTips != ''"><img src="./public/img/gongchi.png" alt="" style="width:0.8rem;"/> <span v-text="list.welfareTips"></span></p>
<p>
<img style="width:0.8rem;" :src="list.packageId == 4 ? './public/img/Diamond-business.png' : (list.packageId == 3 ? './public/img/Platinum-Enterprise.png' : (list.packageId == 2 ? './public/img/v.png' : ( list.packageId == 1 ? './public/img/common.png' : './public/img/commonhui.png')))">
<span v-text="list.customerLevelTips"></span>
</p>
</div>
</div>
</li>
<!-- 搜索结果为空 -->
<div class="search-null" v-if="list == null || list == '' ">
<div style="width:50%;margin:0rem auto;">
<img src="./image/default_empty_image.png" alt=""/>
</div>
<p>亲,暂无符合条件的兼职呦</p>
<p>您可以试试其它关键字</p>
</div>
<!-- 加载中动画 -->
<li v-if="list.length >= 3" class="li-loading">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<span>加载中</span>
</li>
</ul>
<div class="scroll-layer"></div>
</div>
</div>
</div>
</div>
</div>
<!-- <footer class="footer" @click="download">
<div>
<img src="./image/logo-dibu@2x.png">
</div>
<div class="download btn">
下载APP
</div>
</footer> -->
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll-lite.min.js"></script>
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script src="https://map.qq.com/api/js?v=2.exp&key=KVTBZ-WD5CG-CCGQB-IME45-74MD5-2FBHU"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ksrNsHiHVWunv05d9pLKfLhO"></script>
<!-- <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll-probe.min.js"></script> -->
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="./public/js/index.js"></script>
<!-- <script src="../dist/index.bundle.js"></script> -->
</body>
</html>
js部分
// 实例化iscroll
var slideScroll18 = new IScroll('.swiper-slide18',{
scrollbars: false,
mouseWheel: true,
momentum:false,
bouncTime: 600,
click: true,
disablePointer: true,
disableTouch: false,
deceleration: 0.000006,
/*probeType: 2,*/
scrollbars:true,
getScrollW:'4rem',
snap: 'li',
fixedScrollbar: false
})
// 滚动
slideScroll18.on('scrollEnd', function () {
if(this.directionY == 1 && this.y+$('div.swiper-slide').height() <0){
view.start_index++;
view.listAndBanner_ajax();
}
refresh();
});
slideScroll18.on('scrollStart',function(){
if(this.directionY == -1 && this.y == 0){
view.start_index = 0;
view.ajax_status = 1;
setTimeout(function(){
view.ajax_status = 2;
},1000)
setTimeout(function(){
view.listAndBanner_ajax();
},2000);
}
// 跳转的事件
jobdetails_link:function(id){ // 跳转工作详情
window.location.href = '/h5/jobDetails.html?jobId='+id;
}
解决方案
已经找解决方案,我在元素上绑定了触摸开始和触摸结束两个事件,触摸开始便存储刚点击时的坐标,再触摸结束时增加和触摸开始时坐标的判断,如果不等便不跳转
下面附上打印出来的touch详细内容:
这篇关于移动web开发 - 移动web端滚动后立即触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
