HTML选择元素的焦点转移问题

Problem with focus transfer on HTML select elements

本文关键字：转移 问题 焦点 选择 元素 HTML      更新时间：2023-09-26

我有一个由数字行组成的表单，类似于下面的HTML -

<div style="display: table-row">
     <div style="display: table-cell">
          <label for="Region">Region</label>
     </div>
      <div style="display: table-cell">
           <select  id="Region" name="Region">
               <option value="">Please Select</option>
               <option value="AL">Alabama</option>
               <option value="AK">Alaska</option>
               <option value="AS">American Samoa</option>
           </select>
      </div>
</div>

我有一个HoverOut事件，当用户将鼠标光标移出最外层时触发，这将从该行的输入字段中移除焦点。当行有焦点时，我有一些样式应用于行，当鼠标不在时，我将其删除。我的问题是选择语句和IE7/8。

如果FF5，如果我使用鼠标从选择下拉菜单中选择一个条目，一切都如预期的那样工作。然而，在IE7/8中，发生的事情是，当鼠标光标离开div标记区域时，外部行接收mouseout事件(触发悬停)，而我试图从下拉菜单中选择一个条目。如果我把鼠标放在div上，并使用光标键来导航列表，它会工作得很好。

我的问题是有一种方法可以防止mouseout事件被传递到外部行，而我仍然从选择列表中选择一个值。

您可以在http://jsfiddle.net/photo_tom/9JXfk/9/

看到工作演示

你可以使用

event.stopPropagation();
相关文章：