近日想用一个开源的MD编辑器,找到了editor.md确实不错,功能很丰富。但是在查看Demo时,发现了一个问题:
对于触屏笔记本使用Chrome浏览器时,editor.md Toolbar按钮会失效,点击没有任何反应。但使用快捷键和编辑器以外的按钮和使用Firefox、IE、Edge时没有发生这种情况。查了好多资料竟然没有人出现过这类事情,感觉很诡异呀,所以开始看代码寻找问题。
通过查看editormd.js 发现了问题所在:
在代码的第1250行:
toolbarIcons.bind(editormd.mouseOrTouch("click", "touchend"), function(event) {}
为Toolbar按钮绑定 click
或者 touchend
事件,判断生成何种事件是调用的 editormd.mouseOrTouch("click", "touchend")
方法(代码的第4464行)
editormd.mouseOrTouch = function(mouseEventType, touchEventType) {
mouseEventType = mouseEventType || "click";
touchEventType = touchEventType || "touchend";
var eventType = mouseEventType;
try {
document.createEvent("TouchEvent");
eventType = touchEventType;
} catch(e) {}
return eventType;
};
问题就出现在这段代码里。
通过我的测试发现,对于具备触屏功能的笔记本使用Chrome浏览器时 document.createEvent("TouchEvent")
是可以的,但对于 Firefox、IE、Edge是无效的,因此当使用Chrome浏览器时按钮绑定的是 touchend
事件,所以用鼠标点是没有用滴。
我觉得这段代码是为了区分移动端和PC端的,但随着越来越多的笔记本电脑也有触屏功能后,这种判断方式就不准确了,毕竟有触屏功能也不一点要用。
现有的解决方案是默认返回 click
事件,不管是触屏还是鼠标都可以用,如果有更好的解决方案那就更好了。
2条答案
按热度按时间hujrc8aj1#
困扰我这个问题一下午,一会研究下源代码,我说在台式机上没毛病,到笔记本没报错,为啥就不行了,找到原因了,从没想问题处在触屏上,你这一说,我嗖的一下切换回去,那手一点,哎呀我去,是挺好用的,用鼠标点一下午没反应我还以为鼠标咋地了。多谢
mlnl4t2r2#
感谢分享 还以为是电脑出问题了呢