Question

考虑以下示例（也可在此处获取：http://jsfiddle.net/hq8Fg/1/）。它在IE9中运行良好，但在Chrome 16中不起作用。

在IE中，如果我点击单选按钮，我会看到该消息，但在Chrome中没有任何反应。

<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
  function begin() {
    var rb1 = document.getElementById('rb1');
    rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
  }
</script>
</head>
<body onload="begin()">
    <input id="rb1" type="radio" />
    <textarea id="theText"></textarea>
</body>
</html>

知道为什么它不能在Chrome中运行以及我可以做些什么来修复它？

P.S。我知道我可以使用像JQuery这样的库，但我想知道是否可以不使用任何库。

Answer 1

根据这个less than stellar source，单选按钮的焦点事件只有当你 tab 进入它时才会触发，你可以在你的小提琴中看到它。

我会看看我是否能在理想情况下找到更好的MDN文档。

修改

来自this MDN article


更改焦点

有几种方法可以更改当前关注的元素。该   最简单的是调用你的XUL元素的focus方法   希望将重点放在。模糊方法可用于删除   从一个元素聚焦。以下示例演示了这一点：

示例5：源视图



<button label="Focus" oncommand="document.getElementById('addr').focus()"/>或者，您可以使用   方法advanceFocus和rewindFocus在命令调度程序上。   这些方法将焦点按顺序移动到下一个元素或者   前面的元素分别。 这是用户发生的事情   按TAB或Shift + Tab。

对于文本框，只要有文本框，就会添加一个特殊属性   元素有焦点。你可以检查一下这个   用于确定元素是否具有焦点的属性，来自a   脚本或样式表。如果是，它将具有值true   文本框具有焦点，如果文本框没有焦点，则   属性不会出现。

假设您想将焦点从当前位置移动到   浏览器认为应该是的下一个地方。用户通常会这样做   通过点击“Tab”键。你可以在任何有XUL的地方做到这一点   浏览器文档简单地说：

（强调我的）

Answer 2

您可以尝试onclick事件，因为问题不在于元素聚焦时不会调用事件;问题是它实际上并不专注于点击。您可以通过聚焦textarea，然后按 SHIFT + Tab 来解决这个问题。

Answer 3

我可以说，当键盘用于导航到单选按钮时，焦点事件仅触发单选按钮。要单击单选按钮，请使用以下单击事件：http://jsfiddle.net/jfriend00/XatCv/

为什么addEventListener不能用于Chrome中的单选按钮焦点事件？

3 个答案: