我正在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
知道发生延迟的情况会发生什么吗?
答案 0 :(得分:0)
touchstart
事件的延迟是“有机”。该设备有一个很小的机会来决定是否应该在应用程序/浏览器(香草触摸)或in-os(四指滑动以在打开的应用程序之间切换)处理触摸。当然,后者必须在没有副作用的情况下进行处理 - 如果你进行四指滑动,你不希望在底层内容上触发一两次触摸。
如果您必须规避此行为,请考虑专门解决此问题的a broad polyfill或FastClick library。