雨夜带刀's Blog

指尖上的事件-touch事件的封装

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现。

zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题。

于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7、Andorid 4 上的一些比较常见的浏览器中测试通过。

tap事件

tap 事件相当于 pc 浏览器中的 click 效果,虽然在触屏设备上 click 事件仍然可用,但是在很多设备上,click 会存在一些延迟,如果想要快速响应的 “click” 事件,需要借助 touch 事件来实现。

浅谈浏览器的原生拖拽事件

虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 DOM 元素的位置,只是 UI 层面的交互效果。最近在做的拖拽上传文件,拖拽时需要和服务端进行数据层面的交互,此时就需要用到浏览器原生的拖拽事件。

在高级浏览器中,DOM 元素都有一个 draggable 属性,用于标记其是否可以在浏览器中拖拽,常见的 a 、img 元素的 draggable 默认值为 true,浏览器默认其是可以拖拽的,而其他的布局元素如 div、p 这些默认并不支持拖拽,所以值是 false,如果想让其可以拖动,需要先将其设置成 true。

再来看看原生的拖拽相关的事件类型:

  • drag : 元素被拖拽时由拖拽元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragstart : 拖拽时开始时由拖拽元素触发的事件
  • dragend : 拖拽结束时触发由拖拽元素的事件
  • dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
  • dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
  • drop : 当拖拽元素在放置区域放置时由放置元素触发的事件

浅谈DOM事件的优化

在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove、resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll)。

浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法。

mousemove 在拖拽中的优化

拖拽( Drag )是很常见的一个功能,在浏览器还没实现原生的拖拽之前,通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来,当然这里不谈如何去实现一个拖拽功能。

mousemove 事件在拖拽的应用中既要确保拖拽的流畅度,又要确保拖拽时的性能,如何保持两者的平衡呢?

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。