Javascript touchStart事件和QueryCommand状态延迟问题

我正在iOS中使用

contentEditable

的编辑器上工作。因此，为了了解一些HTML元素是什么，我使用了

document.queryCommandState（）

。这非常有效，但在使用

touchstart

事件时，它实际上似乎有延迟：

$('#editor').bind('touchstart', function(e) {
    $('#debug').text('touched');

    if (document.queryCommandState('bold')) {
        $('#debug').text('bold');
    }
    if (document.queryCommandState('italic')) {
        $('#debug').text('italic');
    }

});

HTML:

这是粗体文本

这是斜体文本

在设备或iOS模拟器上进行测试时，当触摸粗体文本时，调试会正确地说元素被触摸，但不会说它是粗体的。只有第二次触摸它，它才会显示为粗体

因此，使用

queryCommandState（）

时似乎有延迟。如果在斜体和粗体之间来回点击，则只显示上一种样式。例如，点击粗体，然后点击斜体将显示粗体，但点击粗体将显示斜体

演示（确保您在iOS上进行测试）：

---

知道有延迟的地方发生了什么吗？

touchstart事件的延迟是“有机的”。该设备有一个很小的机会窗口来决定是在应用程序/浏览器（香草触摸）还是在操作系统（四个手指滑动以在打开的应用程序之间切换）中处理触摸。当然，后者必须在没有副作用的情况下进行处理——如果你用四个手指滑动，你就不想触动底层内容

---

如果你必须绕过这个行为，考虑或具体处理这个问题。

如果你说的是真的，那么为什么我会立刻看到我的调试div中的“被触摸”的文本？polyfill和FastClick似乎都会给我的应用程序增加性能问题。测试FastClick几乎使它毫无用处。

<div id="editor" contenteditable="true">

    <p>This is <strong>bold text</strong>.</p>
    <p>This is <em>italic text</em>.</p>

</div>
<div id="debug"></div>