精华内容
下载资源
问答
  • touch和click

    2018-11-19 19:40:25
    所以我们要对两者之间的关系现代浏览器对其的支持情况要有一定的认识。 千万不要试图去通过js来判断设备是否支持触摸或者两者都支持。 模拟的click事件有300ms的延迟 在手指交互的设备上,如果仅仅绑定了click事件...

    前端开发中,触摸事件和点击事件随着技术的发展,我们可以在同一台设备上同时需求两者同时存在。所以我们要对两者之间的关系和现代浏览器对其的支持情况要有一定的认识。

    千万不要试图去通过js来判断设备是否支持触摸或者两者都支持。

    模拟的click事件有300ms的延迟

    在手指交互的设备上,如果仅仅绑定了click事件是会有问题。因为触屏设备模拟的click事件有内建的300ms的延迟。实际上,是因为浏览器需要等待来判断你是否正在做一个双击操作。而双击操作会缩放屏幕。这300ms的时延是一个用户可感知的延迟,会带来极差的用户体验。

    解决的方案
    • 如果页面不支持缩放,浏览器就会取消这个延迟。所以比较快捷的方案就是添加meta标签去控制缩放,都可以取消延迟。
    <meta viewport="user-scalable=no">或者
    <meta viewport="widht=device-width">
    

    但是user-scalable=no禁止了所有的缩放,包括点击缩放和其他方式,这意味着如果你想使用缩放来给老人提供良好的体验的计划要泡汤了,至少是这样的。

    • 同时绑定click和touchstart事件,可以保证触屏设备尽快地响应touchstart,同时可以支持其他所有设备,因为click事件有广泛的兼容性。但是你必须调用preventDefault方法防止事件处理函数被调用多次。

    Pointer事件:一个囊括鼠标鼠标、触摸及其他

    随着IE10,微软带来了pointer事件来处理用户输入。不过因为各位巨擎的不和导致现在各种浏览器对它的兼容做的很差,其他pointer正式面世的那一天。

    欢迎大家留言补充,提出批评!

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

    在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动

    touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生。

    touch事件和click事件发生先后顺序:

    touchstart,touchmove,touchend,click

    补充知识:touchstart与click同时触发

    产生冲突的原因

    我们可以给某个元素同时绑定 touchstart 和 click 事件,但这将会导致本篇文章解决的问题 – 这两个事件在移动设备上会发生冲突。

    由于移动设备能够同时识别 touchstart 和 click 事件,因此当用户点击目标元素时,绑定在目标元素上的 touchstart 事件与 click 事件(约300ms后)会依次被触发,也就是说,我们所绑定的回调函数会被执行两次!。这显然不是我们想要的结果。

    解决方案

    (1)原生JS

    方法一:

    使用事件对象中的 preventDefault 方法,preventDefault 方法的作用在于:阻止元素默认事件行为的发生,但有意思的是,当我们在目标元素同时绑定 touchstart 和 click 事件时,在 touchstart 事件回调函数中使用该方法,可以阻止后续 click 事件的发生。

    const Button = document.getElementById("targetButton")

    Button.addEventListener("touchstart", e => {

    e.preventDefault()

    console.log("touchstart event!")

    })

    Button.addEventListener("click", e => {

    e.preventDefault()

    console.log("click event!")

    })

    方法二:

    基于功能检测绑定事件

    我们可以通过判断浏览器是否支持 touchstart 事件来封装元素的点击事件,这样客户端会根据当前环境判定元素应该绑定的事件类型,代码如下:

    const Button = document.getElementById("targetButton")

    const clickEvent = (function() {

    if ('ontouchstart' in document.documentElement === true)

    return 'touchstart';

    else

    return 'click';

    })();

    Button.addEventListener(clickEvent, e => {

    console.log("things happened!")

    })

    (2) VUE解决方案:

    HTML

    @touchstart.prevent="gtouchstart(XXX)"

    @touchend.prevent="triggerReply(XXXX)">

    {{ item.content}}

    JS

    data: function () {

    return {

    Loop: 0

    };

    }

    gtouchstart: function (XXXX) {

    let self = this;

    //执行长按的内容

    self.Loop = setTimeout(function () {

    self.Loop = 0;

    //XXXXXXXXXXXXXXX

    }, 500);

    return false;

    },

    triggerReply: function (XXXX) {

    let self = this;

    clearTimeout(self.Loop);

    //这里click内容

    if (self.Loop !== 0) {

    //XXXXXXXXXXXXXXX

    }

    return false;

    },

    添加 touchstart.prevent,组织click事件。

    点击事件顺序

    点击事件可以分解成多个事件

    在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->click

    以上这篇vue中touch和click共存的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件...

    在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动

    touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生。

    touch事件和click事件发生先后顺序:

    touchstart,touchmove,touchend,click

    展开全文
  • touch和click优先性

    2018-04-19 20:49:00
    jQuery的touch事件是当用户触摸事件(页面)时触发的。 jQuery的click事件是当用户点击元素时触发...所以在触发touch事件时,默认会自动触发click事件。 阻止这样继承的方法就是使用preventdefault()方法,如:...

    jQuery的touch事件是当用户触摸事件(页面)时触发的。

    jQuery的click事件是当用户点击元素时触发的。

    而事件执行流程是手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。所以在触发touch事件时,默认会自动触发click事件。

    阻止这样继承的方法就是使用preventdefault()方法,如:

    var but = document.querySelector('.button');

    but.addEventListener("touchstart",function(e){

                                              e.preventdefault();

                                              body.style.background="f0f";

                                                                          }

    but.addEventListener('click',function(){

                                        body.style.background="000";

                                                             }

    转载于:https://www.cnblogs.com/wbwq/p/8886196.html

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

    千次阅读 2017-09-16 10:06:18
    这里要实现的需求是拖动时只响应touch事件,不响应click事件 在view的OnTouchListener中,返回true代表不继续事件冒泡,因此加一个变量进行判断就行了。 代码如下:case MotionEvent.ACTION_DOWN: touchFlag=false...
  • 这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWNACTION_UP,那么Android是如何...
  • 这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWNACTION_UP,那么Android是如何...
  • 直接清除touch事件document.removeEventListener("touchstart", self.pageLockHandler, false); document.removeEventListener("touchend", self.pageLockHandler, false);function pageLockHandler(e) { e....
  • Android中touch和click事件的区别

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

    千次阅读 2012-03-01 16:44:53
    这个理解是不太正确的,针对某个view,用户完成了一次触碰操作,显然从传感器上得到的信号是手指按下抬起两个操作,我们可以理解为一次Click,也可以理解为发生了一次ACTION_DOWNACTION_UP,那么Android是如何...
  • 可是由于图标的大小相应区域的大小要根据不同分辨率来适配。这样的话不同分辨率手机上,图标大小肯定像素值一样了。这样肯定不行。所以为了让图标的大小响应区域都可以自由定制,所以以下的...
  • 移动端touch事件和click事件的区别
  • touchstart碰到就触发事件,click是点击触发,以下是详细介绍二者的区别 https://blog.csdn.net/lululove19870526/article/details/44345759
  • click touch 区别

    2012-04-27 22:32:28
    如果 在一个listView 中放置一个Button 会导致ListView 获得不到焦点 解决方法:  给button 设置  button.setFouceable... 这样listView中Button可以接收click事件,ListView也可以接收 onTouchEvent 事件。
  • 今天来说说touch事件吧,通常我们都会写这样的代码 然而,我们是不是常常疑问,我这个到底return的是false...当你返回false,你还可以响应你的onClick 事件onLongClick事件。写的比较简单,也没写具体例子,这个只是
  • 在iphone手机上绑定click事件时,当你触发点击事件时,你绑定...但是touchstart事件的触发机制和click不同。在你滑动页面的时候,如果触碰到了绑定时间的节点就会产生相关的事件。 具体取舍看实际情况。 转载于:h...
  • 上网一顿搜索发现touch和click的执行顺序: touchstart --> touchmove --> touchend --> touchcancel --> click 所以,执行完touch事件后会执行click事件,在ios中就会出现长按松开后就会关闭弹出层。这里我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 434
精华内容 173
关键字:

touch和click