移动端触摸事件及对象

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title></title>
    </head>
  <body>
    <div class="one">hehehehehehe</div>
    <div class="two">hahhahhahaha</div>
    <script type="text/javascript">
      /*
        *clientX:触摸目标在视口中的x坐标。
        *clientY:触摸目标在视口中的y坐标。
        *identifier:标识触摸的唯一ID。
        *pageX:触摸目标在页面中的x坐标。
        *pageY:触摸目标在页面中的y坐标。
        *screenX:触摸目标在屏幕中的x坐标。
        *screenY:触摸目标在屏幕中的y坐标。
         *target:触目的DOM节点目标。
        *touches:touch对象,里面包含的是一些坐标信息。
        * targetTouches:touch对象,包含坐标信息,具体情况不清楚,如果length代表了手指的数量。
        * changedTouches:touch对象,包含坐标信息,具体情况不清楚。
      * */
      //监听手指滑动
      document.addEventListener(‘touchmove‘, function(event){
        // var x = event.touches[0].clientX;
        // var y = event.touches[0].clientY;
        // var identifier = event.touches[0].identifier;
        // var pageX = event.touches[0].pageX;
        // var pageY = event.touches[0].pageY;
        // var screenX = event.touches[0].screenX;
        // var screenY = event.touches[0].screenY;
        // var target = event.touches[0].target;
        // console.log(x,y,identifier,pageX,pageY,screenX,screenY,target)
        console.log(event.targetTouches.length)
        // console.log(‘2:‘,event.changedTouches)
      });
      //监听触摸
      // document.addEventListener(‘touchstart‘, function(event) {
        // alert(1)
      // });
      //监听触摸结束
      // document.addEventListener(‘touchend‘, function(){
        // alert(3)
      // });
    </script>

  </body>
</html>

时间: 2024-10-28 06:30:26

移动端触摸事件及对象的相关文章

touchSwipe移动端触摸事件

今天分享一款很棒的插件touchSwipe,估计很多朋友都在找手机全屏滚动的效果,因为好多企业的微官网是或是专题都在用这样的效果,那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件,如:Ipad,苹果.安卓,当然PC上也是可以用的,嘻嘻.插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏.缩放等效果.本实例主讲滚屏效果,相了解缩放功能的请参考官方文档. 特点: 1.监听滑动的4个方向:上.下.左.右: 2.监听多个手指

移动端触摸事件 【转】

触摸事件 三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:     1. touchstart:手指放在一个DOM元素上.     2. touchmove:手指拖曳一个DOM元素.     3. touchend:手指从一个DOM元素上移开.     每个触摸事件都包括了三个触摸列表:     1. touches:当前位于屏幕上的所有手指的一个列表.     2. targetTouches:位于当前DOM元素上的手指的一个列表. 3. changedTouches:涉及当前事件的手

移动端二三事【二】:移动端触摸事件点透及多种解决方案。

大家都知道的少说,多分享一些干货. 一.首先说移动端的三大主要事件: 1.手指按下: ontouchstart2.手指移动:ontouchmove3.手指抬起 ontouchend *使用移动端事件时,为尽可能地保证兼容性与调试时的友好性,尽可能用事件绑定的方式.例如: /* 注意: 在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener). */ //用以下方式浏览器的移动端模拟器可能会无法识别事件 var div =

HTML5移动端触摸事件

工作了近一个月了 因为公司是主要偏向于移动端,开始不懂移动端事件 一直用的click  click在安卓端没有什么问题 但在IOS端就有问题了点击之后会延迟半秒  多亏旁边大神指点 原来  iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计出来的.Click事件在iOS上会有半秒左右的延迟,原因是iOS要highlight接收到click的element.而mou

js 处理移动端触摸事件

在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的效果,例如我们只需知道滑动的距离,向左还是向右,我们可以自己写一些代码来处理touch事件: 以下代码,只在触摸情况下支持,电脑需要chrome模拟手机: 可以改造成自己需要的效果: <!doctype html> <html> <head> <meta charse

移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

http://www.cnblogs.com/foolisher/p/5412723.html http://blog.csdn.net/b7995547/article/details/48951761 http://www.cnblogs.com/koukouyifan/p/4066567.html css device-width如何在js中获取 0,js判断是手机还是pc: function IsPC() { var userAgentInfo = navigator.userAgent

移动端触摸事件

原生  ontouchstart  ontouchmove  ontouchend  obj.addEventListener('touchstart',start) obj.addEventListener('touchmove',move)  obj.addEventListener('touchend',end <a>点击我</a> <div>abc</div> div{position:absolute;left:0;top:0;background

H5移动端触摸事件:touchstart、touchend、touchmove

第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1{ width:500px; height:500px; border:1px solid red; } </style> <script type="text/javascript"> function load (){ var oInp = document.g

移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]

转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 iphone.ipod  Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏