2

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

在 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);
    }
}
4

1 回答 1

3

尝试将您的代码更改为：

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/

于 2013-09-19T06:55:24.277 回答