javascript - getSelection 在 Chrome 中无法正常工作

Question

在下面的代码中，通过 onclick 单击任何单元格或顶部的 div 调用 selectTextOnly()。

在 Chrome 中 如果我点击任何表格单元格，一切正常。但是，当我单击 div 时，会调用该函数但不会设置任何选择。

同时单击 div 和单元格在 Firefox 中按预期工作。

为什么点击 div 不选择 Chrome 中的单元格？

关于 jsFiddle 的示例

HTML:

---

<div style="width: 45px; height:20px; background-color:#339900" onclick="selectTextOnly('notes')" id="test"></div>

<table id="all" class="optionEmail"  width="100%" border="0">
  <tr>
    <td id="notes" onclick="selectTextOnly('notes')">This is the notes cell</td>
  </tr>
  <td> 
  <table id="email">
  <tr>
    <td onclick="selectTextOnly('email')">This is the email cell</td>
  </tr>
  <tr>
    <td id="itinerary" onclick="selectTextOnly('itinerary')">This is the flights cell</td>
  </tr>
  <tr>
    <td onclick="selectTextOnly('all')">This is the all cell</td>
  </tr>
  </table>
  </td>
</table>

javascript:

---

function selectTextOnly(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

Answer 1

试着把你的代码改成这样:

function selectTextOnly(containerid) {
    var text = document.getElementById(containerid);
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } 
}

if 语句用于检查 document.body.createTextRange 仅用于 IE； else 适用于所有其他浏览器。

演示:http://jsfiddle.net/IrvinDominin/2K3ZT/2/