前端手机左右滑动事件

2024-11-03

(转)js的左右滑动触屏事件

原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备触屏事件杂谈分类: js js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始时触发事件 touchend在触摸结束时触发事件 touchmove这个事件比较奇怪,按

移动设备、手机浏览器Javascript滑动事件代码

以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 touchend,并获取了触摸时触点在页面上的坐标,根据坐标进行了左右滑动.上下滑动判断. 代码如下:  <!DOCTYPE html> <html> <head> <title>TouchEvent测试</title

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

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

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

原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

移动端H5开发 (滑动事件)

最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch demo</title> <style type="text/css"> #demo{

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

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

android 解决ListView点击与滑动事件冲突

如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面写点击事件,直接添加一下 ListView.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)

webview滑动事件与内部html左右滑动事件冲突问题的解决办法

最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋, 因为页面中有很多图片, 每次页面显示出来后,图片还没加载完毕,所以加载图标一直在那里转动,影响了用户浏览页面,最后将此功能删除了). 以上基本具备了混合app的雏形,可以拿出来忽悠一

Android判断Touch为滑动事件还是操作控件

Android判断Touch为滑动事件还是操作控件因为在项目中要判断WebView是否处于滚动状态,但它不像ListView有onScrollStateChanged方法来监听,要实现就得手动监听它的Touch事件. 谈起Touch事件不得说提到 onInterceptTouchEvent,它是ViewGroup的一个扩展函数,要实现高级效果必不可少的就需要重写 onInterceptTouchEvent.对所有的 MotionEvent 起到一个过滤的作用,最终的目的是防止一些事件传递到它

HTML5学习总结-09 拖放和手机触屏事件

一拖放拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 http://www.w3school.com.cn/html5/html_5_draganddrop.asp 二手机触屏事件 1 触屏事件 touchstart 当手指触摸到屏幕时触发touchmove 手指在屏幕上移动时触发touchend 手指离开屏幕时触发touchenter 当触点进入某个

去除手机端触摸滑动事件ontouchmove

window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; } 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll) 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $(‘body’).on(‘touchm

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取

关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果解决方案:event.preventDefault();//阻止浏览器默认事件即可 2.阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了: 解决方案:设置两个开关,分别对应左右滑动和上下滑动

android ViewPager滑动事件讲解

首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法:(onPageScrollStateChanged,onPageScrolled ,onPageSelected) onPageScrollStateChanged(int arg0) ,此方法是在状态改变的时候调用,其中arg0这个参数有三种状态(0,1,2).arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,a

wap开发之滑动事件（swipe、tap、swipeleft、swiperight）等

最近一直找在wap端可以实现的swipe等滑动事件的方法,开始研究了jquery-mobile,zepto,结果由于jqm太大.zepto有不少缺陷.为此研究了zepto,想把里面的swipe事件独立出来,结果... 就在一筹莫展的时候,同事推荐了一个jquery-mobile定制版,贴出来,希望给在研究wap站的攻城师有些帮助.如果只要使用其swipe.tap等事件,只要直接选择events下的touch即可.

Zepto.js touch模块深入分析解决手机点击事件

源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ; (function($) { var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1

Android onTouch、OnLongClick、onClick和ScrollView滑动事件冲突

为了实现近期录制的长按,松开手指,结束录制功能.在项目,难道你去走一走会头晕,书写demo为了下一个梳理. 顺便研究android事件调用机制. 先上效果界面: 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width=&quo

Android 解决Gallery下ScrollView滑动事件冲突

在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义Gallery控件来避免这个问题: 下面贴出代码: import android.content.Context; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.MotionEv

JavaScript在智能手机上的应用-测试是否支持滑动事件

---------------------------- <script type="text/javascript"> //网页加载的回调 function init() { try { document.createEvent("TouchEvent"); alert("

addEventListener以及滑轮滑动事件的应用

addEventListener用于向元素添加事件,而其适用于较新版的IE浏览器(如IE9),对于IE6/7/8来说,应该用attachEvent 下面的代码即为向<img>元素添加事件 var myimage = document.getElementById("img"); if (myimage.addEventListener) { //addEventListener适用于版本较新的IE浏览器 ,如IE9以及火狐浏览器, myimage.addEventListe

基于HTML5手机上下滑动翻页特效

基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览源码下载实现的代码. html代码: <section class="u-alert"> <img style="display:none;" src="images/loading_large.gif"> <div class="alert-loading z-move"> <d

前端手机左右滑动事件

热门专题