老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

禁用与启用手机端页面的 touchmove 事件

WEB前端 BlandonTsai 10364℃ 0评论

手机页面上,产品或者新闻列表加载数据时,常用上划或者下拉的操作进行加载,而不是像PC端那样通过分页页码进行数据翻页。常用的划动加载 JS 组件就是 iScroll ,这个组件是专门用来处理手机端的触动加载操作的。

但是这个插件有个属性,就是上划下拉的时候是通过算法进行处理的,会把手机端默认的 touchmove 功能禁用掉,以免造成划动高度的不确定。但是页面的其他对象层有可能会需要使用系统自带的划动,由此便引发的冲突,要通过额外的方法进行相互适用处理。

touchmove 事件

如上图所示,产品列表划动加载是通过算法实现的,而点击“筛选”的时候弹出的产品属性选择层却是通过屏幕划动直接触发的。同一个页面的不同层划动操作,无疑造成了相互影响。

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:

基中element是要绑定函数的对象;
type是事件名称,要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”;
listener当然就是绑定的函数了,记住不要跟括号;
最后一个参数是个布尔值,表示该事件的响应顺序。布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

所以,禁用 touchmove 事件的写法是:

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除,那么启用 touchmove 事件的写法是:

非也,非也,非也!

上面这种写法是大错特错的,我在页面中调用了一下,发现根本不起作用,无法重新启动手机页面默认的 touchmove 事件。

touchmove 移除时传入的参数与添加处理程序时使用的参数相同

在上面的写法中,我使用addEventListener()添加一个事件处理程序,虽然调用removeEventListener()是看似使用了相同的参数。但实际上,第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同,如下面的写法所示:

这样指定添加和移动的函数对象是同一个,就能准确地进行定位操作了。

转载请注明:似水流年 » 禁用与启用手机端页面的 touchmove 事件

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
头像
发表我的评论
取消评论


(15)个小伙伴在吐槽
  1. 头像
    掐指一算,这个博客能风光一百年!
    衣皇后2016-12-24 16:35 回复
  2. 头像
    没什么好说的,提前祝博主新年快乐!
    挖宝网2016-12-27 09:24 回复
  3. 头像
    需要向博主学习的地方还有很多,很多,很多……
    三五营销2017-01-06 08:26 回复
    • 头像
      That's a crcajerkcak answer to an interesting question
      匿名2017-03-10 14:41 回复
  4. 头像
    最近很少浏览博客了,认真拜读下
    三五营销2017-01-11 13:55 回复
    • 头像
      Always reinfsherg to hear a rational answer.
      匿名2017-03-10 13:54 回复
  5. 头像
    :dai: :jue: :baby: :write: :du: :heng: :ao: :easy: :golf: :se: :lady: :hehe: :bisi: :sleep: :meng: :yue: :sweet: :sad: :say: :speak: :gentle: :dance: :fight: :blink: :mo: :bath: :xiu: :suai: :qie: :xi:
    匿名2017-04-24 12:10 回复
  6. 头像
    :dai: :dai: :jue: 发发发阿萨德得分的
    匿名2017-09-30 15:42 回复
  7. 头像
    :baby: :write: :sweet: :say: :speak: :gentle: :easy: :dance: :fight: :golf: :se: :blink: :mo: :lady: :bath: :xiu: :mo: :dance: :speak: :bisi: :xia: :hehe: :qie: :xi:
    匿名2017-11-22 16:28 回复
  8. 头像
    :yue: :sweet: :write: :baby: :du: :blink:
    匿名2017-12-08 16:07 回复
  9. 头像
    :say:
    匿名2018-03-13 16:18 回复
  10. 头像
    :suai:
    匿名2018-03-28 20:06 回复
  11. 头像
    :write: :baby: :jue: :dai: :yue: :sweet:
    匿名2018-04-23 14:05 回复
  12. 头像
    :heng:
    匿名2018-06-08 16:14 回复
  13. 头像
    :happy:
    匿名2018-07-26 16:08 回复