HTML 双击选择异常
我没有将其发布在 DocType 上,因为它实际上并不是一个设计
的东西,视觉表示不是我的问题,行为才是。如果这是错误的,我很抱歉,但我不认为这是设计师的问题。
以下 DOM:
<ul style="overflow: hidden;">
<li style="float: left;"><strong>SKU:</strong>123123</li>
<li style="float: left;"><strong>ILC:</strong>asdasdasdasd</li>
</ul>
Or
<div style="overflow: hidden;">
<div style="float: left; width: 49%"><strong>SKU:</strong>123123</div>
<div style="margin-left: 50%; width: auto;"><strong>ILC:</strong>asdasdasdasd</div>
</div>
Or
<p>
<span><strong>SKU:</strong>123123</span>
<span><strong>ILC:</strong>asdasdasdasd</span>
</p>
中出现了一个奇怪的问题,
- All 在IE 6
- IE 7
- Firefox 3.x
- Chrome
但在
- IE 8
中却没有。当您双击“SKU:”后的“123123”时,它会选择“ 123123' AND 'ILC:' 来自下一个 dom 元素。
获取此页面上的任何文本(此处为 SO),双击一个单词,它只会选择该单词,即使在段落中间也是如此。这些例子有 dom 元素关闭它们,任何人都知道为什么会发生这种情况。
我的同事使用“双击”机制来选择相关的产品 ID 来完成他们的工作,但这对我来说毫无意义。
I didn't post this on DocType because it's not really a design
thing, the visual representation isn't my problem, the behaviour is. I'm sorry if this is misplaced but I don't feel it's a designer issue.
The following DOM:
<ul style="overflow: hidden;">
<li style="float: left;"><strong>SKU:</strong>123123</li>
<li style="float: left;"><strong>ILC:</strong>asdasdasdasd</li>
</ul>
Or
<div style="overflow: hidden;">
<div style="float: left; width: 49%"><strong>SKU:</strong>123123</div>
<div style="margin-left: 50%; width: auto;"><strong>ILC:</strong>asdasdasdasd</div>
</div>
Or
<p>
<span><strong>SKU:</strong>123123</span>
<span><strong>ILC:</strong>asdasdasdasd</span>
</p>
All present me an odd problem in
- IE 6
- IE 7
- Firefox 3.x
- Chrome
But not in
- IE 8
When you double click '123123' after 'SKU:', it selects '123123' AND 'ILC:' from the next dom element.
Take any text on this page (here in SO), double click a word, it only selects THAT WORD, even in the middle of a paragraph. These examples have dom elements closing them, anyone know why this is happening.
My fellow employees use the 'double click' mechanism to select the relevant product ID's to do their job, and this dosen't make sense to me what soever.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我也有同样的问题。如果您在 li 的结束标记之前放置一个空格,则应该修复它。
I had the same problem. If you put a space before the closing tag of your li that should fix it.
如果您在每个 < 之间放置一个不间断空格(
或
\u00A0
)或只是一个空格 (" "
) code>span,它将分隔单词并防止双击选择溢出到相邻的范围。如果您不想看到可见空间,请使用零宽度空间(
或\u200B
)。If you put a non-breaking space (
or
\u00A0
) or just a empty space (" "
) between eachspan
, it will separate the words and prevent the double-click selection from spilling into adjacent spans.If you don't want to see a visible space, use a zero-width space (
or\u200B
).我怀疑,如果您在两个元素之间包含空格或不间断空格
,您会发现可以双击并仅选择一个元素,但不能同时选择两个元素,因为浏览器将不再将这两个元素视为一个单词。
I suspect that if you include a space or a non-breaking space
between your two elements, you will find that you can double-click, and select only one but not both elements, as the browser will no longer see the two elements as a single word.