raphael.js中拖拽事件在笔记本上不可触发的问题

问题描述

最近在改以前的项目代码，问题是通过raphael.js创建出来的svg元素拖动的事件在一些笔记本拖拽不了。

一开始还以为是浏览器版本的问题，所以更换浏览器发现还是不行。

并且不同笔记本还会出现不同的表现，有些笔记本可以，有些笔记本不可以。

问题追踪

在这个过程中，不管在哪个平台，页面都没有报错，代码都是正常运行的，这个就需要从raphael.js中找到答案。

结果发现项目中引用的是rapheal-min的压缩之后的代码，可读性不强。

所以就去找没有压缩过的代码去看。官网地址

源码阅读

一开始还以为源码很难读懂，其实读了之后发现raphael.js其实结构是比较简单的，这个提供了一些方便快速构建SVG元素，绑定事件等一些便利的方法，除此之外，还做了一些平台兼容的判断。除此之外，代码的方法层级结构也比较合理，采用的是对象的写法，所以可读性还是非常高的。

经过一番阅读，拖拽事件raphael.js中已经封装好了一个很好的方法：

1. 我们先从使用来快速了解，如果想对SVG元素绑定拖拽功能，直接使用this.drag(onmove, onstart, onend),我在拖动的每一个事件加上输出 ，发现在笔记本都不能正常触发。

   • 台式：
   • 笔记本：
     说明我们事件是绑定成功的，但是在rapheal中是不能正常进行的。

2. 我们试试在源码加输出，查看哪里出了问题
   
   找到这个函数，我们绑定的拖拽事件就是通过这个方法来绑定的。
   分析了一下，触发拖拽的开始是监听鼠标的mousedown来触发start函数的。
   从第一步骤，也可以指定，笔记本是没有进入start函数的，因为我在里面加了console.log(start),但是笔记本并没有输出。

这里的this就是SVG对象本身

我们输出看看：
这里是rapheal自己封装的对象，上面保存这个SVG元素的所有属性和事件。我们找到这里的events属性，里面的mousedown就是我们没有触发到的事件，但是我们点击屏幕的事件是需要绑定在dom节点上的。

所以我们就需要找到rapheal.js是如何管理事件的加载和卸载的。

从代码可以看出是通过eve来进行加载的。

触发也是通过eve来调用的，也找到了拖拽事件的处理的方法

dom事件绑定

我们找到了拖拽的函数之后，我们直接去查找哪里进行DOM事件的绑定，基本就可以理清楚整个流程了。

全局搜索addEventListener

发现rephael自己封装了一个添加事件的方法，我们查看哪里使用这个方法：

发现项目在引入的时候，就已经将SVG的每一个对象进行了一次遍历。
所以就可以将每一个SVG对象上的events绑定到实际的DOM节点上。

真相大白

我们在这里一行增加了输出监听之后，发现了问题所在。

问题就出现在这里

这里是rephael进行了移动端的兼容，我们查看这个变量是如何获取的。

它是通过获取页面中是否存在 createTouch的属性。我们在MDN上进行搜索，可知：

这个其实是一个移动端的事件，但是由于支持度的问题，出现了一些平台的浏览器有这个方法，而这个属性是一个即将遗弃的属性，所以我们直接修改这里的判断即可。这里的目的是为了区分移动端和PC端的区别。

看了最新版本的repheal的判断方法，这里使用的是ontouchstart来进行鉴别。

如果直接使用新版本替换，会出现很多兼容性的问题，所以这里依然用的是旧版本，只不过这里的判断平台的方法使用了新版本的方法。

总结

其实这个问题花费了我一个下午时间来排查，因为要做很多次去判断哪里的问题，要理清楚原本旧的代码，到最后确认是插件的问题之后，又需要看一遍插件的源码，最后一点点排查，才能确认问题出现的地方。

这是我第一次从源码上解决问题，感觉还是有点变化的，因为在大学期间面对源码真的是无从下手，到现在能够自己去查、改源码，发现自己还是成长了不少。

话不多言，这里仅记一次旧项目的兼容问题修复。