移动端一滑动就触发a链接,特别的敏感,怎么处置

2024-11-02

移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。

/*仅适用于内容中点击元素.对于拖动等元素,需要自行在页面处理. * 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素. * 如果手指移动距离小于10像素,则还是认为用户在做点击操作.如果移动距离超过了10像素,则取消后续事件监听函数的执行.*/ <script type="text/javascript"> function makeTouchableButton(ele) { if (!ele) { console.error

移动端tab滑动和上下拉刷新加载

移动端tab滑动和上下拉刷新加载查看demo(请在移动端模式下查看) 查看代码开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我只要一个小小的tab滑动功能,就要引入200+k的js这未免太过浪费.而且swiper是没有下拉刷新功能的,要用swiper实现下拉刷新还得改造一番.在实现功能的同时产生了不少bug.要是在引入一个下拉刷新的插件又难免多了几十kb的js.而且这些插件对dom结构又是有一定要求的,一不小心就有bug.

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

vue实现一个移动端屏蔽滑动的遮罩层

在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </div> 对,就是这么简单,加上@touchmove.stop就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10; } 如此,

hammer的初始化及移动端各种滑动

前言:本人对hammer了解不是很多,早做项目时遇到了手机端的一些滑动事件,特此分析下hammer的某些属性. hammer.js是一款开源的移动端脚本框架,他可以完美的实现在移端开发的大多数事件,如:点击.滑动.拖动.多点触控等事件.Hammer.js不需要依赖任何其他的js框架,并且整个框架非常小,v2.0.4版本只有3.96kb. 1.hammer.js引用可直接引入文件,也可以引入CDN地址.在这里,为了方便,我引入了JQuery框架. hammer的在线CDN地址为:<script

swiper嵌套小demo(移动端触摸滑动插件)

swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo<

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正哈: HTML文档做了移动端优化,按照750px的设计稿哈.HTML这个元素的font-size是document.documentElement.clientWidth / 7.5,所以rem是动态的. 感觉不足之处是动画平滑度不太好.应该再改改偏移量和时间间隔,还有一个因素是用setInterv

jquery 触发a链接点击事件

jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();">确认</a></p> $(".btnSubmit a")[0].click(); <p id="tob"><a href="1.html">这是文字</a></p>$(

用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能. 一.直接上代码.<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type&quo

pc端_移动端_H5_ QQ在线客服链接代码

PC端:QQ在线客服链接代码 <a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=yes">tencent咨询</a> PC端手机端通吃:QQ在线客服链接代码 <a href="http://wpa.qq.com/msgrd?v=3&uin=1239300678">wpa咨询</a> [在百度搜索的时候还发现一个,

移动端touch滑动事件监听

<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript判断手指在移动端上滑动的方向</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </s

【css】用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能一.直接上代码. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

移动端 uni-app 滑动事件精确判断手指滑动方向

移动端根据手指滑动操作判断滑动方向设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前移动的方向具体实现: 1.获取开始和结束坐标 1 /* 移动开始 */ 2 handletouchstart(event) { 3 //event.changedTouches[0].clientX; 移动的x轴坐标 4 //lastY = event.changedTouches[0].clie

怎么解决js中如滑动到最底端一次操作触发多次

定义一个布尔类型到标志,处理中将起设置为true ,处理完改完false,逻辑: data{ isInProcessing:false } //逻辑函数过程中: if(isInProcessing){ return }else{ this.data.isInProcessing=true //............. (处理,掉接口...) // 处理完改为false this.data.isInProcessing=false }

JQuery 移动端上下滑动切换插件 pageSlider

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta content="tel

app中页面滑动，防止a链接误触

问题 app中list列表,当我们用手滑动屏幕,屏幕上页面内容会快速滚动,不会因为手已经离开了屏幕而滚动停止,突然手触摸暂停,当手指是在a标签上面时,会跳转链接,这对客户体验及其不好思路先判断滚动事件是否已经停止,当停止之后,再给一定时间的延时,之后的点击才有效.这样的话,当快速滚动之后,第一次点击屏幕,让屏幕滚动停止,第二次点击屏幕,如果是点击了一个a标签才能跳转到其他路由解决代码 $(function() { //处理滑动超长list的时候 click页面强行停止页面可能会触发页面

移动端上下滑动事件之--坑爹的touch.js

下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用百度的 touch.js 是可以用的,但是使用方式和 zepto有点不一样. 解决方案:参照这个链接地址 http://www.cnblogs.com/zhongxia/p/5410478.html ========================================================== 转:http://blog.csdn.net/minidrupal/article/de

a标签不触发目标链接

1. a 标签点击时页面回调转到href制定的页面 <a href="www.baidu.com">go to baidu</a> 2. 加上onclick="return false;" onclick事件处理函数就认为这个链接没有被点击. 3. 所以可以在onclick事件处理函数所触发的javascript代码里增加一条return false;防止被带走 onclick="myMethod(this); return

基于slideout.js实现的移动端侧边栏滑动特效

HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~~ 先看下运行效果: 一.准备资料只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 1)menu.png 2)happy.png 二.实现代码 HTML代码: <!doc

根据bootstrap框架实现移动端触摸滑动的方法

有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考. $(function () { let $carousels = $('#carouselExampleSlidesOnly'); let start, // 初始值 end; // 结束值 $carousels.on('touchstart', function (e) { start = e.originalEve

移动端一滑动就触发a链接,特别的敏感,怎么处置

热门专题