Question

我使用js来改变div颜色取决于输入点击或选择它在firefox上完美的工作但是收音机输入没有看到onblure属性所以它永远不会将div返回到它的静态颜色当点击任何地方
这里的功能

<script type="text/javascript">


    function highlight(element) {
        element.parentNode.style.backgroundColor = '#84DFC1';
    }

    function removeHighlight(element) {
        element.parentNode.style.backgroundColor = '';
    }
</script>

这里的无线电输入

<div class="form-item">
<label>Gender:</label>
<input id="male-radio" type="radio" name="radio"value="male" class="radio-form" onselect="highlight(this);" onchange="highlight(this);" onfocus="highlight(this);"  onblur="removeHighlight(this);"></input> 
<label id="male-label">Male</label>
     <input id="female-radio" type="radio" name="radio" class="radio-form" value="female" onselect="highlight(this);" onchange="highlight(this);" onfocus="highlight(this);" onblur="removeHighlight(this);"></input>
         <label class="radioform-label">Female</label> 
    </div>

Answer 1

Safari和Chrome（即WebKit浏览器）不会触发“焦点”和“模糊”事件，以响应单选按钮，复选框和按钮的鼠标操作。 Here是关于该主题的PPK的Quirksmode页面。但是，当键盘用于浏览表单时，他们执行触发事件。

Answer 2

试试这个（在IE9，FF4中测试）：

<script type="text/javascript">
    function highlight(element)
    {
        element.parentNode.style.backgroundColor = '#84DFC1';
    }
    function removeHighlight(element)
    {
        element.parentNode.style.backgroundColor = '';
    }
</script>

<div class="form-item">
    <label>
        Gender:</label><input id="male-radio" type="radio" name="radio" value="male" class="radio-form" onclick="highlight(this);" onblur="removeHighlight(this);"></input>
    <label id="male-label">
        Male</label>
    <input id="female-radio" type="radio" name="radio" class="radio-form" value="female" onselect="highlight(this);" onclick="highlight(this);" onblur="removeHighlight(this);"></input>
    <label class="radioform-label">
        Female</label>
</div>

这在Safari或Chrome中无效。根据W3C，onblur不是单选按钮的有效事件。

您也可以删除计时器上的突出显示。见下文。这适用于所有浏览器。

<html>
<head>
    <script type="text/javascript">
        function highlight(element)
        {
            element.parentNode.style.backgroundColor = '#84DFC1';

            //Remove highlight in 3 seconds
            setTimeout("document.getElementById('" + element.id + "').parentNode.style.backgroundColor = ''", 3000);
        }
    </script>
</head>
<body>
    <div class="form-item">
        <label>
            Gender:</label><input id="male-radio" type="radio" name="radio" value="male" class="radio-form" onclick="highlight(this);"></input>
        <label id="male-label">
            Male</label>
        <input id="female-radio" type="radio" name="radio" class="radio-form" value="female" onselect="highlight(this);" onclick="highlight(this);"></input>
        <label class="radioform-label">
            Female</label>
    </div>
</body>
</html>

Javascript功能在Chrome中无法正常运行

2 个答案: