在另一个div上使用touch时,contenteditable不起作用

Question

请耐心等待,但这是一个非常具体的问题,需要一些背景知识,这是iPad iOS 5.0特有的问题

想象一下,创建一个可以重新组合IDE的HTML页面.左侧是资源管理器,右侧是使用contenteditable字段的编辑字段.

这是一个简化的结构:

<div id="left">
<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
</div>
<div id="content">
    <div id="editable" contenteditable="true">
    edit here...
    </div>
</div>

想象一下,左侧场地有数百个你好.我使用iScroll4库将这些元素转换为滚动系统.使用触摸滚动效果很好.

这是问题所在.假设我刷新页面,开始编辑,添加或删除文本.然后我轻弹左侧看另一个元素.如果我然后触摸编辑字段我无法添加文本.

我在内容字段上面添加了一个链接元素

<a href="javascript:touched()">touch me</a>

触摸的功能什么都不做,但触摸链接会以某种方式更改内容,以便我可以再次编辑可信任的字段.我的第一印象是,这可能是一个焦点问题.所以我追踪了各种元素的重点.没有.我甚至为踢球设定了焦点,也没有发生任何事情.

我想,也许是丢失的关键序列？我添加了一个document.onkey事件,并且正在捕获所有关键事件.我踢的时候添加一个方法调用来将显式焦点设置为可编辑字段.没有.

在这一点上,我完全陷入困境,因为我不知道为什么满足于无法使用.让用户重新点击链接以允许焦点是IMO一个愚蠢的想法.有人遇到过这个问题吗？有人有解决方案吗？

谢谢

Answer 1

您可以尝试使用 CSS 指针事件，以便它们在触摸 contenteditable 元素时不会滚动：

*[contenteditable=true]{
  pointer-events:none;
}

我不知道这是否适用于触摸屏，但值得一试。