HTML Double Click Selection Oddity

问题

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>

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

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

回答1:

I had the same problem. If you put a space before the closing tag of your li that should fix it.

<ul style="overflow: hidden;">
    <li style="float: left;"><strong>SKU:</strong>123123 </li>
    <li style="float: left;"><strong>ILC:</strong>asdasdasdasd </li>
</ul>

回答2:

I suspect that if you include a space or a non-breaking space &nbsp 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.

来源：https://stackoverflow.com/questions/2876424/html-double-click-selection-oddity

标签

html

dom

double-click