精华内容
下载资源
问答
  • 在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要...
  • 移动端touch事件和click事件的区别
    展开全文
  • Android中touch和click事件的区别

    千次阅读 2015-08-07 10:17:10
    这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWNACTION_UP,那么Android是如何...

    http://blog.csdn.net/hufeng882412/article/details/7310142


    针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent,还是onClick,亦或是onLongClick事件?

    在Android中,一次用户操作可以被不同的View按次序分别处理,并将完全响应了用户一次UI操作称之为消费了该事件(consume),那么Android是按什么次序将事件传递的呢?又在什么情况下判定为消费了该事件?

          搞清楚这些问题对于编写出能正确响应UI操作的代码是很重要的,尤其当屏幕上的不同View需要针对此次UI操作做出各种不同响应的时候更是如此,一个典型例子就是用户在桌面上放置了一个Widget,那么当用户针对widget做各种操作时,桌面本身有的时候要对用户的操作做出响应,有时忽略。只有搞清楚事件触发和传递的机制才有可能保证在界面布局非常复杂的情况下,UI控件仍然能正确响应用户操作。



    1.  onTouchEvent

         onTouchEvent中要处理的最常用的3个事件就是:ACTION_DOWN、ACTION_MOVE、ACTION_UP。

         这三个事件标识出了最基本的用户触摸屏幕的操作,含义也很清楚。虽然大家天天都在用它们,但是有一点请留意,ACTION_DOWN事件作为起始事件,它的重要性是要超过ACTION_MOVE和ACTION_UP的,如果发生了ACTION_MOVE或者ACTION_UP,那么一定曾经发生了ACTION_DOWN。

         从Android的源代码中能看到基于这种不同重要性的理解而实现的一些交互机制,SDK中也有明确的提及,例如在ViewGroup的onInterceptTouchEvent方法中,如果在ACTION_DOWN事件中返回了true,那么后续的事件将直接发给onTouchEvent,而不是继续发给onInterceptTouchEvent。



    2.  onClick、onLongClick与onTouchEvent

         曾经看过一篇帖子提到,如果在View中处理了onTouchEvent,那么就不用再处理onClick了,因为Android只会触发其中一个方法。这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下和抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWN和ACTION_UP,那么Android是如何理解和处理的呢?

         在Android中,onClick、onLongClick的触发是和ACTION_DOWN及ACTION_UP相关的,在时序上,如果我们在一个View中同时覆写了onClick、onLongClick及onTouchEvent的话,onTouchEvent是最先捕捉到ACTION_DOWN和ACTION_UP事件的,其次才可能触发onClick或者onLongClick。主要的逻辑在View.java中的onTouchEvent方法中实现的:

    Java代码
    1. case MotionEvent.ACTION_DOWN:  
    2.   
    3.     mPrivateFlags |= PRESSED;  
    4.   
    5.     refreshDrawableState();  
    6.   
    7.     if ((mViewFlags & LONG_CLICKABLE) == LONG_CLICKABLE) {  
    8.   
    9.          postCheckForLongClick();   
    10.   
    11.     }  
    12.   
    13.     break;  
    14.   
    15. case MotionEvent.ACTION_UP:  
    16.   
    17.     if ((mPrivateFlags & PRESSED) != 0) {  
    18.   
    19.          boolean focusTaken = false;  
    20.   
    21.          if (isFocusable() && isFocusableInTouchMode() && !isFocused()) {  
    22.   
    23.                focusTaken = requestFocus();  
    24.   
    25.          }  
    26.   
    27.    
    28.   
    29.     if (!mHasPerformedLongPress) {  
    30.   
    31.        if (mPendingCheckForLongPress != null) {  
    32.   
    33.              removeCallbacks(mPendingCheckForLongPress);  
    34.   
    35.        }  
    36.   
    37.        if (!focusTaken) {  
    38.   
    39.               performClick();  
    40.   
    41.        }  
    42.   
    43.     }  
    44.   
    45.     …  
    46.   
    47.     break;  

         可以看到,Click的触发是在系统捕捉到ACTION_UP后发生并由performClick()执行的,performClick里会调用先前注册的监听器的onClick()方法:
    Java代码
    1. public boolean performClick() {  
    2.   
    3.     …  
    4.   
    5.     if (mOnClickListener != null) {  
    6.   
    7.         playSoundEffect(SoundEffectConstants.CLICK);  
    8.   
    9.         mOnClickListener.onClick(this);  
    10.   
    11.         return true;  
    12.   
    13.     }  
    14.   
    15.         return false;  
    16.   
    17. }  
    18.   
    19.    


    LongClick的触发则是从ACTION_DOWN开始,由postCheckForLongClick()方法完成:
    Java代码
    1. private void postCheckForLongClick() {  
    2.   
    3.      mHasPerformedLongPress = false;  
    4.   
    5.      if (mPendingCheckForLongPress == null) {  
    6.   
    7.          mPendingCheckForLongPress = new CheckForLongPress();  
    8.   
    9.      }  
    10.   
    11.      mPendingCheckForLongPress.rememberWindowAttachCount();  
    12.   
    13.      postDelayed(mPendingCheckForLongPress, ViewConfiguration.getLongPressTimeout());  
    14.   
    15. }  

    可以看到,在ACTION_DOWN事件被捕捉后,系统会开始触发一个postDelayed操作,delay的时间在Eclair2.1上为500ms,500ms后会触发CheckForLongPress线程的执行:
    Java代码
    1. class CheckForLongPress implements Runnable {  
    2.   
    3. …  
    4.   
    5.         public void run() {  
    6.   
    7.             if (isPressed() && (mParent != null)  
    8.   
    9.                     && mOriginalWindowAttachCount == mWindowAttachCount) {  
    10.   
    11.                 if (performLongClick()) {  
    12.   
    13.                     mHasPerformedLongPress = true;  
    14.   
    15.                 }  
    16.   
    17.             }  
    18.   
    19.         }  
    20.   
    21. …  
    22.   
    23. }  


    如果各种条件都满足,那么在CheckForLongPress中执行performLongClick(),在这个方法中将调用onLongClick():
    Java代码
    1. public boolean performLongClick() {  
    2.   
    3.       …  
    4.   
    5.       if (mOnLongClickListener != null) {  
    6.   
    7.           handled = mOnLongClickListener.onLongClick(View.this);  
    8.   
    9.       }  
    10.   
    11.       …  
    12.   
    13. }  

    从实现中可以看到onClick()和onLongClick()方法是由ACTION_DOWN和ACTION_UP事件捕捉后根据各种情况最终确定是否触发的,也就是说如果我们在一个Activity或者View中同时监听或者覆写了onClick(),onLongClick()和onTouchEvent()方法,并不意味着只会发生其中一种。



    下面是一个onClick被触发的基本时序的Log:

    04-05 05:57:47.123: DEBUG/TSActivity(209): onTouch ACTION_DOWN

    04-05 05:57:47.263: DEBUG/TSActivity(209): onTouch ACTION_UP

    04-05 05:57:47.323: DEBUG/TSActivity(209): onClick

    可以看出是按ACTION_DOWN -> ACTION_UP -> onClick的次序发生的。



    下面是一个onLongClick被触发的基本时序的Log:

    04-05 06:00:04.133: DEBUG/TSActivity(248): onTouch ACTION_DOWN

    04-05 06:00:04.642: DEBUG/TSActivity(248): onLongClick 

    04-05 06:00:05.083: DEBUG/TSActivity(248): onTouch ACTION_UP

    可以看到,在保持按下的状态一定时间后会触发onLongClick,之后抬起手才会发生ACTION_UP。



    3.  onClick和onLongClick能同时发生吗?

         要弄清楚这个问题只要理解Android对事件处理的所谓消费(consume)概念即可,一个用户的操作会被传递到不同的View控件和同一个控件的不同监听方法处理,任何一个接收并处理了该次事件的方法如果在处理完后返回了true,那么该次event就算被完全处理了,其他的View或者监听方法就不会再有机会处理该event了。

         onLongClick的发生是由单独的线程完成的,并且在ACTION_UP之前,而onClick的发生是在ACTION_UP后,因此同一次用户touch操作就有可能既发生onLongClick又发生onClick。这样是不是不可思议?所以及时向系统表示“我已经完全处理(消费)了用户的此次操作”,是很重要的事情。例如,我们如果在onLongClick()方法的最后return true,那么onClick事件就没有机会被触发了。



    下面的Log是在onLongClick()方法return false的情况下,一次触碰操作的基本时序:

    04-05 06:00:53.023: DEBUG/TSActivity(277): onTouch ACTION_DOWN

    04-05 06:00:53.533: DEBUG/TSActivity(277): onLongClick 

    04-05 06:00:55.603: DEBUG/TSActivity(277): onTouch ACTION_UP

    04-05 06:00:55.663: DEBUG/TSActivity(277): onClick

    可以看到,在ACTION_UP后仍然触发了onClick()方法 

    展开全文
  • touch的事件 //移动端touch的4种事件,每个触摸事件被触发后,会生成一个event对象 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 ...移动端touch事件和click事件的...

    touch的事件

    //移动端touch的4种事件,每个触摸事件被触发后,会生成一个event对象
    touchstart:     //手指放到屏幕上时触发
    touchmove:      //手指在屏幕上滑动式触发
    touchend:    //手指离开屏幕时触发
    touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用
     
    

    移动端touch事件和click事件的区别
    在移动端,手指点击一个元素会经过touchstart -> touchmove -> touchend -> click
    在移动端touchstart和click的触发条件是有区别的

    touchstart:手指开始触摸DOM元素的时候触发

    click:手指触摸dom开始,且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值),且在这个dom上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发

    click事件在移动端有时延的问题

    使用fastclick插件可以消除在移动端click事件带来时延的问题

    只触发touch事件,不触发click事件

    使用preventDefault()阻止事件的默认行为

    var content = document.querySelector(".content");  
    content.addEventListener("touchstart", function(e){  
        e.preventDefault(); 
        content.style.background = "#0F0";  
    })  
     
    // 这个事件在touchstart里面不会触发
    content.addEventListener("click", function(e){  
            content.style.background = "#00F";  
    });
    
    展开全文
  • singleTap doubleTap分别代表单击双击。 二、使用tap会出现点透事件(事件穿透) 很多用过Zepto(移动端开发的库)都说使用tap会出现点透事件。 1、什么是tap事件穿透 执行完上层绑定的tap事...

    一、click 与tap比较

    click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件。singleTap 和 doubleTap分别代表单击和双击。

    二、使用tap会出现点透事件(事件穿透)

    很多用过Zepto(移动端开发的库)都说使用tap会出现点透事件。

    1、什么是tap事件穿透

    执行完上层绑定的tap事件后,下层如果绑定着click事件或者本身就存在点击事件(a/input)也会默认触发,这就是点透事件,

    touch事件使上层的元素被隐藏,这个很重要,下层的被绑定的click事件元素就会出现在前面,touchend的默认行为就会触发click事件

    2、出现点透事件的原因

    首先要知道tap事件是通过监听绑定document上的touch事件来模拟的,并且tap 事件是冒泡到document上才出发的;

    touchstart:在这个dom上用手触摸就能开始

    click:在这个dom上用手触摸,且手指未曾移动,且在这个dom上手指离开屏幕,且触摸和离开时间很短(有的浏览器可能不检测时间间隔,照样可以出发click),才开始触发。

    也就是说在移动端的事件触发从早到晚排序:touchstart touchstop click。所以click的触发是有延时的,大约300ms,所以click触发的原则是,触发当前有click的元素,且该元素面朝用户的最前端,才会触发click。

    3、解决办法

    (1)github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

    在dom ready时初始化在body上,如:

    $(function(){
    newFastClick(document.body);
    })
    然后给需要“无延迟点击”的元素绑定click事件即可。实战开发中,click响应速度比tap还要快一点。

    (2)为元素绑定touchend事件,并在内部加上e.preventDefault();

    复制代码
    $A.on(‘touchend’,function(e){//而touchend是原生的事件,在dom本身上就会被捕获触发

    $demo.hide()
    e.preventDefault();
    

    })
    复制代码
    监听touchend事件,阻止A元素的touchend的默认行为,从而阻止click事件的产生.

    三、touch事件

    主要有

    touchstart事件:当手机触摸屏幕时触发,即使已经有一个手指放在屏幕上也会触发。

    touchmove事件:当手指在屏幕上华东法人时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

    touchend事件:当手指从屏幕上离开的时候触发。

    touchcancel事件:当系统停止跟踪触摸的触发。关于这个实际的确切触发时间。

    每个触摸事件都包括了三个触摸列表:

    1.touches:当前位于屏幕上的所有手指的一个列表。

    2.targetTouches:位于当前DOM元素上的手指的一个列表。

    3.changedTouches:涉及当前事件的手指的一个列表。

    例如,在一个touchend事件中,这就会是移开的手指。

    这些列表由包含了触摸信息的对象组成:

    1.identifier:一个数值,唯一标识触摸会话(touchsession)中的当前手指。

    2.target:DOM元素,是动作所针对的目标。

    3.客户/页面/屏幕坐标:动作在屏幕上发生的位置。

    4.半径坐标和rotationAngle:画出大约相当于手指形状的椭圆形。


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
          }
          .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
          }
          .box2 {
            width: 400px;
            height: 400px;
            background-color: green;
          }
        </style>
      </head>
      <body>
        <!-- 1.引入fastclick.js文件 -->
        <script src="./fastclick.js"></script>
        <div class="box1"></div>
        <div class="box2"></div>
        <script>
          if ("addEventListener" in document) {
            document.addEventListener(
              "DOMContentLoaded",
              function() {
                FastClick.attach(document.body)
              },
              false
            )
          }
          var box1 = document.querySelector(".box1")
          var box2 = document.querySelector(".box2")
          // 为box1 绑定touch事件
          //   移动端的点透, 发生结构堆叠的情况, 脱离标准流的盒子隐藏掉之后,会触发标准流中盒子的事件
          box1.addEventListener("click", function() {
            // box1隐藏
            this.style.display = "none"
          })
          //   方式1 阻止默认行为
          //   box1.addEventListener("touchend", function(e) {
          //     e.preventDefault()
          //   })
          // fastclick 处理
          //   为box2绑定click事件
          box2.addEventListener("click", function() {
            console.log("我是box2")
          })
        </script>
      </body>
    </html>
    
    
    展开全文
  • H5开发:论click tap touch三者的区别

    千次阅读 2017-05-18 09:56:43
    一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap doubleTap分别代表单次点击和双次点击 二:tap的穿透处理 ...
  • 移动端web开发,click touch tap区别

    万次阅读 2016-06-17 17:58:25
    一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap doubleTap分别代表单次点击和双次点击 二:tap的穿透处理 使用...
  • touch实现click

    2017-01-12 12:35:30
    有了touch事件,click事件将失效。那么有时候我们需要同一个对象有touch,还要有click,该怎么办? 很简单,首先得明白一个问题: click的特性:同一个位置,鼠标停留大约不超过300ms,可认为是click事件。 touch...
  • 一·: 300毫秒的道德规范  移动设备访问的Web页面都是pc上的页面。...Safari用300ms延迟来判断,而后来的iPhone,Android也用这种方式来判断,因此移动页面的click反应比PC端的慢上300毫秒。  为了解决
  • Android:Touch和Click区别 编辑

    千次阅读 2012-03-01 16:44:53
    这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWNACTION_UP,那么Android是如何...
  • 在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件...
  • 解决android view的touch和click事件冲突

    千次阅读 2017-09-16 10:06:18
    这里要实现的需求是拖动时只响应touch事件,不响应click事件 在view的OnTouchListener中,返回true代表不继续事件冒泡,因此加一个变量进行判断就行了。 代码如下:case MotionEvent.ACTION_DOWN: touchFlag=false...
  • 移动端web开发click touch tap区别

    千次阅读 2017-12-10 15:14:55
    一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTapdoubleTap分别代表单次点击和双次点击 二:tap的穿透处理 使用...
  • 直接清除touch事件document.removeEventListener("touchstart", self.pageLockHandler, false); document.removeEventListener("touchend", self.pageLockHandler, false);function pageLockHandler(e) { e....
  • 这里提醒下,PC是无法识别touch相关事件 二、解决方式 (1)preventDefault方法 通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决。在touchstart中添加 e.preventDefault()就可以阻止click事件触发...
  • 1. click 事件在移动端会有 200-300ms 的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的 200-300ms 之后,才触发 click,如果 200-300ms 之内还有 click,就会进行放大缩小...
  • 通过前面的分析,当click和touch事件同时存在时会先触发touch,再触发click 。因为我们阻止了touch事件的默认行为,所以,我们点击图片的时候并不会触发click事件,图片也就不会放大。 这里我们需要在==touchend=...
  • 摘要:2 Bakgrund............................................................................................................ 22.1 Muspekaren versus fingret................................................
  • 百度 touch js 百度touch.js可以说是Web移动端touch点击事件不错的解决方案,搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。
  • touch 操作就有可能既发生 onLongClick 又发生 onClick 。这样是不是不可思议?所以及时向系统表示“我已经完全处理(消费)了用户的此次操作”,是很重要的事情。例如,我们如果在 onLongClick() 方法的最后 return...
  • touch事件与click事件

    千次阅读 2016-09-16 20:59:48
    touch事件与click事件
  • tap 和click 事件区别

    千次阅读 2018-09-04 18:49:00
    clike事件 Zepto.js 中tap的区别 首先介绍下Zepto: ...介绍下tap和click区别: 两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,sing...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,828
精华内容 11,131
关键字:

click和touch的区别