解决使用editor.md时Chrome下无法点击编辑器工具栏按钮的问题

editor.md官网
github
使用editormd作为markdown编辑器时,笔者遇到一个问题,在谷歌浏览器下,工具栏不能点击,其他浏览器(IE等)可以点击,这个问题困扰了好几天,终于找到了前辈的经验,这里发出来分享,以免其他使用者入坑。

这个问题的原因描述
editormd.js文件中editormd.mouseOrTouch这个函数是绑定事件的,它原本的目的是判断设备是否有触摸屏,然后只给按钮添加“click”事件或则只添加“touchend”事件。但是没有考虑到有触摸屏的笔记本,此时只工具栏按钮只添加了“touchend”事件,即按钮不能用鼠标点击,触摸屏就可以点击,开发者工具模拟手机可以点击。

解决方式:函数改造,主要是添加浏览器判断

  /**
     * 鼠标和触摸事件的判断/选择方法
     * MouseEvent or TouchEvent type switch
     *
     * @param   {String} [mouseEventType="click"]    供选择的鼠标事件
     * @param   {String} [touchEventType="touchend"] 供选择的触摸事件
     * @returns {String} EventType                   返回事件类型名称
     */

    editormd.mouseOrTouch = function(mouseEventType, touchEventType) {
        mouseEventType = mouseEventType || "click";
        touchEventType = touchEventType || "touchend";

        var eventType  = mouseEventType;

        try {
            document.createEvent("TouchEvent");
           // eventType = touchEventType;
        } catch(e) {
            console.log(e.toString());
        }
        //解决chrome浏览器不绑定工具栏点击事件
        var userAgentInfo = navigator.userAgent;
      //  console.log(userAgentInfo);
        var Agents = new Array("Android", "iPhone",  "Windows Phone", "iPad", "iPod");
        var flag = false;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = true;
                break;
            }
        }
        if(flag){
            eventType = touchEventType;
        }
       // console.log(eventType);
        return eventType;
    };

浏览器清缓存再测试即可

文章摘至:@smallbabylong

最后修改:2019 年 03 月 22 日 05 : 00 PM
如果觉得我的文章对你有用,请随意赞赏