touchStart 事件和查询命令状态延迟问题

Question

我正在 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：

<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>

在设备或iOS模拟器上进行测试时，当触摸粗体文本时，调试正确表示元素已触摸，但并未表示它是粗体。只有第二次触摸它，它才会注册为粗体。

所以，使用queryCommandState()时似乎有延迟。如果您在斜体和粗体之间来回点击，它只会显示以前的样式。例如，点击粗体然后斜体会说粗体，但点击粗体会说斜体。

演示（确保您在iOS上进行测试）：http://f.cl.ly/items/3W2A0q451Q00401t3E3G/test.html

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

Answer 1

touchstart事件的延迟是"自然的"。该设备有一个小的机会窗口，可以决定触摸是在应用/浏览器内（原版触摸）还是操作系统内（四指轻扫以在打开的应用程序之间切换）。当然，后者必须在没有副作用的情况下进行处理 - 如果您进行四指滑动，则不希望在底层内容上触发一两次触摸。

如果必须规避此行为，请考虑专门解决此问题的广泛 polyfill 或 FastClick 库。