Javascript 需要跟踪用CSS突出显示的“选定”div

我有一个用于div的“onclick”事件处理程序，该div有一个嵌套的只读文本字段，当在onclick处理程序中选择该字段时，其文本字体将从普通变为粗体：

 <div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);">
    <input type="text" size="30" maxlength="50" id="itemName_id"
           name="itemName" value="$itemname" readonly="readonly"
           class="itemListReadonlyTextFieldUnselected"></input>
 </div>

  function handleRowClick(theElement)
  {
      var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
      var theTextField = childTextElementArrayOfSizeOne[0];

      theTextField.className = "itemListReadonlyTextFieldSelected";
  }

下面是“itemListReadonlyTextFieldSelected”CSS类：

   .itemListReadonlyTextFieldSelected
   {
        font-weight: bold;
        color: RGB(255,0,0);
   }

我的页面上有几个“带嵌套只读文本字段的div”

当用户单击其中一个时，上面的onclick处理程序成功地将嵌套文本输入的字体更改为粗体和红色。因此，选择部分-粗体+红色文本-效果良好。但是当用户单击其他位置时，我需要取消选择旧的选择

所以我的问题是-我如何跟踪“当前选择的div+文本输入”项-以便在单击其他div+文本输入时，我可以使用此样式将以前选择的div+文本输入更改回黑色，而不是粗体文本

   .itemListReadonlyTextFieldUnelected
   {
        font-weight: normal;
        color: RGB(0,0,0);
   }

我立即想到我将只在会话中保存“当前选定”的div和文本输入DOM元素——啊，不，这是客户端javascript。会话变量是我在服务器端代码中的目标

我目前的技术要求是php、javascript和html jquery=no

跟踪以前选择的div+文本输入的好方法是什么

---

一种蛮力方法是遍历页面上的元素树，找到一个具有嵌套文本元素的div，该元素的className=itemListReadonlyTextFieldSelected，但我宁愿用一把gott dang大锤砸我的大脚趾，也不愿在代码审查过程中有人在看到类似这样的东西后打我的头那.

把它赋给一个变量怎么样

var currentlySelectedTextElement;

function handleRowClick(theElement)
{
    // un-highlight the currently highlighted element
    if (currentlySelectedTextElement){
        currentlySelectedTextElement.className = "";
    }

    var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
    var theTextField = childTextElementArrayOfSizeOne[0];

    theTextField.className = "itemListReadonlyTextFieldSelected";

    // save the reference so you can un-highlight it later
    currentlySelectedTextElement = theTextField;
}

---

如果你被扇了一巴掌，就扇他们一巴掌，然后说，如果你笨蛋允许我们使用jQuery，我就不必走这么长的路了。itemlistRowContainer输入'.removeClass'itemListReadonlyTextFieldUnselected'；如果你不同意，你会被贴上“不同意”的标签，如果你太接受了，他们会称你为“小鬼”。感谢您的帮助。Thx Brandan，将“onclick=handleBodyClick”添加到我的“body”标签时，新选择的项目未被选中，选择失败。因此，另一个后文提到的“冒泡”方法认为，单击div+文本区域确实会选择它，但同样的鼠标单击“冒泡”到我添加的新onclick=handleBodyClick方法，并立即取消选择刚刚选择的内容。我必须从页面的“body”标记中删除onclick=handleBodyClick，因为调用textfield.stopPropagation无法阻止正文的handleBodyClick立即取消选择。将所选div保存在最顶端javascript块文件范围的“global”变量中，可以让我立即找到以前选择的Div，然后取消选择其内部文本字段。好的。我更新了答案以避免事件冒泡问题。