打开Safari上下文菜单下面的文本选择

Question

我需要在编辑器中的文本选择上方显示工具栏。这很容易。 不幸的是，iOS上的Safari似乎也更喜欢在文本选择上方打开其复制/粘贴/格式上下文菜单。但是Facebook似乎已经找到了一种避免这种情况的方法：

”，

但是在与远程调试器花了近两个小时的时间之后，试图找出他们如何实现这一目标，我'我放弃。我只是无法弄清楚。

我已经建立了一个非常明确的原型，该原型在文本选择上方显示工具栏（下面）。这在我的MacBook（在这种情况下使用Chrome）上正常工作：

​它们在几乎相同的位置上打开，因此无法与我的工具栏进行互动。

我真的很想知道Facebook如何解决它。任何帮助将不胜感激。谢谢:-)

准骨原型：

var toolbar = document.querySelector("div.Toolbar");
toolbar.style.display = "none";

document.onselectionchange = function()
{
    var sel = getSelection();

    if (sel.rangeCount > 0)
    {
        var ran = sel.getRangeAt(0);

        if (ran.collapsed === false)
        {
            var rect = ran.getBoundingClientRect();
            var rectTop = rect.top;
            var rectCenter = rect.left + (rect.width / 2);

            toolbar.style.display = "";
            toolbar.style.left = (rectCenter - (toolbar.offsetWidth / 2)) + "px";
            toolbar.style.top = (rectTop - toolbar.offsetHeight) + "px";

            if (parseFloat(toolbar.style.top) < 0)
            {
                toolbar.style.top = "0px";
            }
            if (parseFloat(toolbar.style.left) < 0)
            {
                toolbar.style.left = "0px";
            }
        }
        else
        {
            toolbar.style.display = "none";
        }
    }
    else
    {
        toolbar.style.display = "none";
    }
}

body
{
    padding: 2em;
}

div.Toolbar
{
    display: inline-block;
    position: fixed;
    background: orange;
    box-shadow: 0px 0px 0.2em #333;
    padding: 0.3em;
}

div[contenteditable="true"]
{
    width: 600px;
    height: 300px;
    border: 1px solid gray;
    padding: 0.5em;
}

<div class="Toolbar">
    Buttons go here
</div>
<div contenteditable="true">
  Try selecting some of this text in the editor. The toolbar shows up above the text selection as intended. But on an iPad we also get Safari's context menu which opens on top of our custom toolbar. Facebook has successfully solved this somehow - but how the heck did they do it?
</div>

Answer 1

我找到了解决方案。

快速答案：添加带有onclick或onMousedown处理程序的“按钮”。

扩展解决方案：
我决定继续进行项目，然后将工具栏安装在视口顶部。但是随着项目的进行，我想在这个问题上进行第二次拍摄 - 这次上下文菜单与我的自定义工具栏没有重叠。事实证明，在这种情况下，仅存在一个元素（＆lt; div＆gt;代表按钮的元素）， onclick 或 onMousedown注册足以使Safari意识到这可能是避免使用UI碰撞的东西。坦率地说，我不喜欢这种“ AI”，但至少现在有一个解释。

var button = document.createElement("div");
button.className = "ToolbarButton ToolbarButtonBold";
button.onmousedown = function() { /* ... */ }; // This saves the day
toolbar.appendChild(button);