由于CodeMirror棉绒
而导致的错误和警告
我正在使用此功能,但是由于鼠标悬停时会显示工具提示,因此我了解到没有鼠标的智能手机存在错误,但是我不知道错误是什么。
这是个问题,因此当我点击标记(或在行号附近点击)时,我试图显示工具提示。
点击相应的部分将其删除。
机制
在CodeMirror的touchend事件中,当您点击标记时,将在此处生成伪鼠标悬停事件来发出工具提示。
如果您可以自己生成并显示工具提示,则不需要伪鼠标悬停事件,但是
该工具提示的功能似乎与codemirror密切相关。
由于不可能仅检索该部分,因此它受伪事件支持。
(当然,您可以复制和粘贴,但是我不喜欢在多个地方使用相同的代码...)
除非是智能手机,否则不会发生touchend事件本身,因此仅当它是智能手机时才起作用。
如果是PC,则照常通过鼠标悬停显示。
码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | CodeMirror.on(cm.display.scroller, "touchend", function (e) { let touch = cm.display.activeTouch; let date = new Date; if (touch && touch.left != null && !touch.moved && date - touch.start < 300) { //エディタの何処かをsingle tapした if (!touch.prev) { //行に変換するならこれ var pos = cm.coordsChar(touch, "page"); //gutterの範囲判定 if(touch.left < Math.floor(cm.display.gutters.getBoundingClientRect().right)){ showLintTooltip(pos.line); return; } } } //hide tooltip if(currentTooptipTarget) { dispatchMouseEvent(currentTooptipTarget, "mouseout", 0, 0); currentTooptipTarget = null; } }); let currentTooptipTarget = null ; function showLintTooltip(line){ let markers = jsEditor.state.lint.marked; let info = jsEditor.lineInfo(line); for (let marker of markers) { if (marker.lines[0].lineNo() === line) { //need to tooltip let element = info.gutterMarkers["CodeMirror-lint-markers"]; if (element) { let rect = element.getBoundingClientRect(); console.log(rect); if(currentTooptipTarget == element){ //hide tooltip dispatchMouseEvent(element, "mouseout", rect.x, rect.y); currentTooptipTarget = null; }else { //hide tooltip if(currentTooptipTarget) { dispatchMouseEvent(currentTooptipTarget, "mouseout", rect.x, rect.y); } //show tooltip dispatchMouseEvent(element, "mouseover", rect.left+rect.width/2, rect.top+rect.height/2); currentTooptipTarget = element; } return; } } } } function dispatchMouseEvent(elm, type,x,y){ var mouseMoveEvent = document.createEvent("MouseEvents"); mouseMoveEvent.initMouseEvent( type, //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout. true, //canBubble false, //cancelable window, //event's AbstractView : should be window 1, // detail : Event's mouse click count x, // screenX y, // screenY x, // clientX y, // clientY false, // ctrlKey false, // altKey false, // shiftKey false, // metaKey 0, // button : 0 = click, 1 = middle button, 2 = right button null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null. ); elm.dispatchEvent(mouseMoveEvent); } |
注意
尽管可以用
上面的代码显示,但在iOS的css(野生动物园)中似乎有一个错误(?),并且似乎
在这种情况下,我认为如果您使用css和
另外,它可以在Android上正常运行(据我所试)。
其他
在ios上使用Codemirror时,存在日语输入奇怪的问题,因此我认为这种对应关系也是必不可少的(我将其用作参考)
https://qiita.com/ttakuru88/items/e363267772cacf4c1fa2
首先在智能手机上编写代码有多少需求?