addeventlistener监听scroll跟touch(实例讲解)

这三个事件只在手机上生效

touchstart：手指开始触屏

touchmove：手指移动

touchend：手指触屏结束

这个事件在手机上跟在pc端都生效

scroll事件

addeventlistener(name,callback,optional,useCapture)

useCapture：事件是否用捕获事件，从外到里，true
                        默认为false:使用冒泡事件，从里到外
optional:{
     passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false)
}

passive:true可以防止页面滚动的时候，页面卡顿，但是奇怪的时，我没有设置的时候 为什么页面看不出卡顿啊 忧桑

大家有碰到过手机页面滚动的时候卡顿的情况吗，为什么我在手机上测试好像看花了眼一样

以上这篇addeventlistener监听scroll跟touch(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • addeventlistener监听scroll跟touch(实例讲解)

    这三个事件只在手机上生效 touchstart:手指开始触屏 touchmove:手指移动 touchend:手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture:事件是否用捕获事件,从外到里,true                         默认为false:使用冒泡事件,从里到外 optional:{      passive:false时,阻止默

  • 使用 vue 实例更好的监听事件及vue实例的方法

    使用 vue 实例更好的监听事件及vue实例的方法

    文章举例说明一下在 vue 中如何更好的监听浏览器事件.原文介绍了一种新增 vue 实例的方法,单独监听事件.这样代码书写较为简练,容易管理. 当监听如下事件的传统做法是: window.scrollX window.scrollY window.innerHeight window.innerWidth 通常需要书写很多代码: created () { this.$el.addEventListener('click', this.someMethod) }, destroyed () { t

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • elementUi vue el-radio 监听选中变化的实例代码

    elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad

  • android 控件同时监听单击和双击实例

    不适用click而用touch 自定义监听: class myOnGestureListener extends GestureDetector.SimpleOnGestureListener { @Override public boolean onDoubleTap(MotionEvent e) { //点赞 mLoadingListener.onFinishedLoading("0");//取消点赞 是一个接口 //已经点赞 更换图片 1:已经点赞 0 :没有点赞 if (lik

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • Jquery实时监听input value的实例

    实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body id="lia-body"> <div class="lia-content"> <div class

  • Spring boot + LayIM + t-io 实现文件上传、 监听用户状态的实例代码

    Spring boot + LayIM + t-io 实现文件上传、 监听用户状态的实例代码

    前言 今天的主要内容是:LayIM消息中图片,文件的上传对接.用户状态的监听.群在线人数的监听.下面我将挨个介绍. 图片上传 关于Spring boot中的文件上传的博客很多,我也是摘抄了部分代码.上传部分简单介绍,主要介绍在开发过程中遇到的问题.首先我们看一下LayIM的相应的接口: layim.config({ //上传图片接口 ,uploadImage: {url: '/upload/file'} //上传文件接口 ,uploadFile: {url: '/upload/file'} //

  • vue 监听屏幕高度的实例

    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum

随机推荐