精华内容
下载资源
问答
  • 现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY; 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这...
  • 本文实例讲述了JS手机端touch事件计算滑动距离的方法。分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =...
  • 主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下
  • 下面小编就为大家带来一篇cocos creator Touch事件应用(触控选择多个子节点的实例)。小编觉得挺不错的,现在就想给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Android判断touch事件点是否在view范围内的方法,涉及Android事件响应与view属性操作的相关技巧,需要的朋友可以参考下
  • 下面小编就为大家带来一篇html5 touch事件实现页面上下滑动效果【附代码】。小编觉得挺不错的,现在分享给大家。一起过来看看吧,给大家一个参考
  • vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
  • 主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码,页面滑动到最上面和最下面的时候阻止其再继续滑动,代码注释很清楚,感兴趣的小伙伴们可以参考一下
  • android touch事件解析

    2018-12-29 17:27:35
    测试过程自己重载了Testlinearlayout 继承自 linearLayout ,里面包含了一个重载的TestButton继承自Button
  • NULL 博文链接:https://dkmeteor.iteye.com/blog/1391394
  • 关于Touch事件的几个模拟示例.如果对分发机制不是很了解的,又没有太多时间模拟实验的,可以参考. 原流程 例子有3个控件: GrandparentView extends ViewGroup (粉色) ParentView extends ViewGroup (蓝色) ChildView ...
  • 由于对js的了解比较少,最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用: $(function(){ document.addEventListener(touchmove, _touch, false); }) function _touch(event){
  • 本文将详细介绍移动端touch事件 概述 包含iOS 2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android上的浏览器也实现了相同的...
  • Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后。 Android的Touch事件处理分3个层面:Activity层,ViewGroup层,View层。 首先说一下Touch事件处理的几条基本规则。 如果在某个层级...
  • 下面是区分 touch 事件是单击还是双击的方法 -(void)singleTap{ NSLog(@Tap 1 time); } -(void)doubleTap{ NSLog(@Tap 2 time); } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *...
  • 主要介绍了Android Touch事件分发过程,详细描述了Android Touch事件的主要处理流程,有助于深入理解Android程序设计,需要的朋友可以参考下
  • 主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码,代码注释很清楚,感兴趣的小伙伴们可以参考一下
  • 那这次就写一下如何只使用touch事件来实现左滑删除。 源码 Talk is cheap. Show me the code. 实现原理 此次组件需要处理touchstart、touchmove和touchend三个touch事件 touchstart事件时需要先禁用掉transition动画...
  • js的touch事件,一般用于移动端的触屏滑动 复制代码 代码如下:$(function(){document.addEventListener(“touchmove”, _touch, false);}) function _touch(event){alert(1);} touchstart:当手指触摸屏幕...
  • Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev)、onInterceptTouchEvent(MotionEvent ev)、onTouchEvent(MotionEvent ev);能够响应这些方法的控件包括:ViewGroup、View、Activity。...
  • Cocos Creator Touch事件与Unity3D Touch事件

    千次阅读 2019-01-18 15:08:15
    Cocos Creator Touch 事件 ...因此,在cocos creator中touch事件是与Node节点息息相关的。 // 使用枚举类型来注册 node.on(cc.Node.EventType.TOUCH_START, function (event) { console.log('To...

    Cocos Creator Touch 事件

    cc.Node 有一套完整的事件监听和分发机制。在这套机制之上,提供了一些基础的节点相关的系统事件。因此,在cocos creator中touch事件是与Node节点息息相关的。

    // 使用枚举类型来注册
    node.on(cc.Node.EventType.TOUCH_START, function (event) {
     console.log('Touch Start');
     event.getID(); //Touch事件的ID
     event.getLocation(); //Touch事件的手指位置
     event.getLocationX(); //获取X轴位置
     event.getLocationY();	//获取触点的 Y 轴位置
     event.getPreviousLocation();	//获取触点上一次触发事件时的位置对象,对象包含 x 和 y 属性
     event.getStartLocation(); 	//获取触点初始时的位置对象,对象包含 x 和 y 属性
     event.getDelta();	//获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性
    }, this);
    
    
    // 使用事件名来注册
    node.on('touchstart', function (event) {
     console.log('Touch Start');
     event.getID(); //Touch事件的ID
     event.getLocation(); //Touch事件的手指位置
     event.getLocationX(); //获取X轴位置
     event.getLocationY();	//获取触点的 Y 轴位置
     event.getPreviousLocation();	//获取触点上一次触发事件时的位置对象,对象包含 x 和 y 属性
     event.getStartLocation(); 	//获取触点初始时的位置对象,对象包含 x 和 y 属性
     event.getDelta();	//获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性
    }, this);
    

    系统提供的触摸事件类型如下:

    • cc.Node.EventType.TOUCH_START ‘touchstart’ 当手指触点落在目标节点区域内时
    • cc.Node.EventType.TOUCH_MOVE ‘touchmove’ 当手指在屏幕上目标节点区域内移动时
    • cc.Node.EventType.TOUCH_END ‘touchend’ 当手指在目标节点区域内离开屏幕时
    • cc.Node.EventType.TOUCH_CANCEL ‘touchcancel’ 当手指在目标节点区域外离开屏幕时

    Unity3D Touch 事件

    Unity3D中Touch事件是以屏幕为基准的,与某个节点无关,全局的Touch事件都统计在Input中,
    可以在update 中监听事件,Unity3D商店中有不少再次封装的Touch事件插件,比如EasyTouch。示例代码来自官方文档

    void Update()
        {
            // Handle screen touches.
            if (Input.touchCount > 0)
            {
                Touch touch = Input.GetTouch(0);
    
                // Move the cube if the screen has the finger moving.
                if (touch.phase == TouchPhase.Moved)
                {
                    Vector2 pos = touch.position;
                    pos.x = (pos.x - width) / width;
                    pos.y = (pos.y - height) / height;
                    position = new Vector3(-pos.x, pos.y, 0.0f);
    
                    // Position the cube.
                    transform.position = position;
                }
    
                if (Input.touchCount == 2)
                {
                    touch = Input.GetTouch(1);
    
                    if (touch.phase == TouchPhase.Began)
                    {
                        // Halve the size of the cube.
                        transform.localScale = new Vector3(0.75f, 0.75f, 0.75f);
                    }
    
                    if (touch.phase == TouchPhase.Ended)
                    {
                        // Restore the regular size of the cube.
                        transform.localScale = new Vector3(1.0f, 1.0f, 1.0f);
                    }
                }
            }
        }
    

    区别

    1. Cocos中Touch以节点为中心,每个节点自己单独处理事件,全局检测可以通过制作一个全屏的Node节点,注册监听Touch事件;Unity3D中把Touch事件作为一种全局输入事件,如果想分开节点处理只能自行记录处理;
    2. Cocos中的TOUCH_MOVE只有手指移动时才能监听到,判断长按事件时,最好设置阈值,因为手指不像鼠标那样精确;Unity3D种每个Touch都有一个TouchPhase属性,通过这个属性判断Touch所处的阶段,所以在Unity3D种的TouchMove是不管手指有没有移动都会有事件。

    创建了一个小游戏交流群,加群或者有问题交流 可以加我微信 备注“微信小游戏”
    在这里插入图片描述
    推广一下自己做的简单的小游戏
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 30分钟搞清楚Android Touch事件分发机制,Touch事件分发中只有两个主角:ViewGroup和View,想要深入学习的朋友可以参考本
  • 移动端touch事件和鼠标事件

    千次阅读 2020-07-21 13:44:48
    由此产生移动端touch事件和mouse事件有何不同的疑问,看完这篇文章感觉很有帮助。以下为转载内容:https://www.cnblogs.com/xiaoxingyiyi/p/5447378.html touch事件的来源 PC网页上的大部分操作都是用鼠标的,即响应...

    前言

    今天解决项目中一个移动端H5点击拖拽问题,发现组件中使用的 onmousemove 和 onmouseup事件。由此产生移动端touch事件和mouse事件有何不同的疑问,看完这篇文章感觉很有帮助。以下为转载内容:https://www.cnblogs.com/xiaoxingyiyi/p/5447378.html

    touch事件的来源

    PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行为,可被拆解成:mousedown -> click -> mouseup三步。

    手机上没有鼠标,所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend,注意手机上并没有tap事件。手指触发触摸事件的过程为:touchstart -> touchmove -> touchend。

    手机上没有鼠标,但不代表手机不能响应mouse事件(其实是借助touch去触发mouse事件)。有人在PC和手机上对事件做了对比实验,以说明手机对touch事件相应速度快于mouse事件。

    在这里插入图片描述

    可以看到在手机上,当我们手触碰屏幕时,要过300ms左右才会触发mousedown事件,所以click事件在手机上看起来就像慢半拍一样。

    touch事件中可以获取以下参数

    参数含义
    touches屏幕中每根手指信息列表
    targetTouches和touches类似,把同一节点的手指信息过滤掉
    changedTouches响应当前事件的每根手指的信息列表

    tap是怎么来的
    用过Zepto或KISSY等移动端js库的人肯定对tap事件不陌生,我们做PC页面时绑定click,相应地手机页面就绑定tap。但原生的touch事件本身是没有tap的,js库里提供的tap事件都是模拟出来的。

    我们在上面看到,手机上响应 click 事件会有300ms的延迟,那么这300ms到底是干嘛了?浏览器在 touchend 后会等待约300ms,原因是判断用户是否有双击(double tap)行为。如果没有 tap 行为,则触发 click 事件,而双击过程中就不适合触发 click 事件了。由此可以看出 click 事件触发代表一轮触摸事件的结束。

    点击穿透现象

    有了以上的基础,我们就可以理解为什么会出现点击穿透现象了。我们经常会看到“弹窗/浮层”这种东西,我做个了个demo。

    在这里插入图片描述

    整个容器里有一个底层元素的div,和一个弹出层div,为了让弹出层有模态框的效果,我又加了一个遮罩层。

    <div class="container">
        <div id="underLayer">底层元素</div>
    
        <div id="popupLayer">
            <div class="layer-title">弹出层</div>
            <div class="layer-action">
                <button class="btn" id="closePopup">关闭</button>
            </div>
        </div>
    </div>
    <div id="bgMask"></div>
    

    然后为底层元素绑定 click 事件,而弹出层的关闭按钮绑定 tap 事件。

    $('#closePopup').on('tap', function(e){
        $('#popupLayer').hide();
        $('#bgMask').hide();
    });
    
    $('#underLayer').on('click', function(){
        alert('underLayer clicked');
    });
    

    点击关闭按钮,touchend首先触发tap,弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了,则继续触发click,由于这时弹出层已经消失,所以当前click事件的target就在底层元素上,于是就alert内容。整个事件触发过程为 touchend -> tap -> click。

    而由于click事件的滞后性(300ms),在这300ms内上层元素隐藏或消失了,下层同样位置的DOM元素触发了click事件(如果是input框则会触发focus事件),看起来就像点击的target“穿透”到下层去了。

    结合Zepto源码的解释
    zepto中的 tap 通过兼听绑定在 document 上的 touch 事件来完成 tap 事件的模拟的,是通过事件冒泡实现的。在点击完成时(touchstart / touchend)的 tap 事件需要冒泡到 document 上才会触发。而在冒泡到 document 之前,手指接触和离开屏幕(touchstart / touchend)是会触发 click 事件的。

    因为 click 事件有延迟(大概是300ms,为了实现safari的双击事件的设计),所以在执行完 tap 事件之后,弹出层立马就隐藏了,此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候,click 到的其实是隐藏元素下方的元素。

    如果正下方的元素有绑定 click 事件,此时便会触发,如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框(或是 select / radio / checkbox),点击默认 focus 而弹出输入键盘,也就出现了上面的“点透”现象。

    穿透的解决办法

    1. 遮挡

    由于 click 事件的滞后性,在这段时间内原来点击的元素消失了,于是便“穿透”了。因此我们顺着这个思路就想到,可以给元素的消失做一个fade效果,类似jQuery里的fadeOut,并设置动画duration大于300ms,这样当延迟的 click 触发时,就不会“穿透”到下方的元素了。

    同样的道理,不用延时动画,我们还可以动态地在触摸位置生成一个透明的元素,这样当上层元素消失而延迟的click来到时,它点击到的是那个透明的元素,也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。具体可见demo

    2. pointer-events

    pointer-events是CSS3中的属性,它有很多取值,有用的主要是auto和none,其他属性值为SVG服务。

    取值 含义
    auto 效果和没有定义 pointer-events 属性相同,鼠标不会穿透当前层。
    none 元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
    关于使用 pointer-events 后的事件冒泡,有人做了个实验,见代码

    因此解决“穿透”的办法就很简单,demo如下

    $(’#closePopup’).on(‘tap’, function(e){
    $(’#popupLayer’).hide();
    $(’#bgMask’).hide();

    $('#underLayer').css('pointer-events', 'none');
    
    setTimeout(function(){
        $('#underLayer').css('pointer-events', 'auto');
    }, 400);
    

    });

    3. fastclick

    使用fastclick库,其实现思路是,取消 click 事件(参看源码 164-173 行),用 touchend 模拟快速点击行为(参看源码 521-610 行)。

    FastClick.attach(document.body);
    从此所有点击事件都使用click,不会出现“穿透”的问题,并且没有300ms的延迟。解决穿透的demo

    有人(叶小钗)对事件机制做了详细的剖析,循循善诱,并剖析了fastclick的源码以自己模拟事件的创建。请看这篇文章,看完后一定会对移动端的事件有更深的了解

    展开全文
  • ios UIScrollView响应touch事件

    热门讨论 2012-10-17 15:14:31
    UIScrollView 响应touchEvent事件。 UIScollView的move与touchMove共存。
  • 在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现。 zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,670
精华内容 39,868
关键字:

touch事件