是否可以使用Javascript和/或CSS使用户从元素中单击？

Question

我在做一个由箭头键控制的游戏。你可以看到它，这里。

我注意到的一个用户体验问题是，如果用户点击一个“设定速度”按钮来改变蛇的速度，那么当他们试图用箭头键上下移动蛇时，因为他们仍然在“设定速度”单选按钮框中点击，它所做的就是通过单选按钮来切换。如果可能的话，我希望一旦他们点击一个“设定速度”按钮，他们被点击出盒子，所以他们的箭头键控制蛇的运动。“设置速度”框的事件侦听器是

$('#speed-form input[type="radio"]').click(function ( )
{
    SG.setSpeed($(this).val());
});

我想知道是否有一行或2，我可以添加到点击用户出#speed-form。

Answer 1

尝试在发生单击时捕捉事件，访问目标元素(输入单选按钮)，并调用元素的blur()方法：

$('#speed-form input[type="radio"]').click(function (event)
{
    $(event.target).blur()
    SG.setSpeed($(this).val());
});

在帮助下：在JavaScript中有任何方法来聚焦文档(内容区域)吗？

Answer 2

编辑:看起来我的反应有点慢，几乎和另一个一样。我会留下这个声音，因为我不能留下评论。我会用斜体字表示唯一的区别。

这应该可以从无线电按钮上移除焦点。如果这不起作用，您可能必须将焦点放在包含游戏的对象上。

$('#speed-form input[type="radio"]').click(function ( )
{    
    SG.setSpeed($(this).val());
    $(this).blur();
});

Answer 3

首先，你的问题更多的是与HTML有关，而不是JavaScript或任何东西。在HTML label元素中，展开，单击checkbox或radiobutton的区域。

您的HTML如下所示。

<tr>
    <td>
        <input type="radio" name="speed" value="slow">
    </td>
    <td align="left">Slow</td>
</tr>

如果你这样改变，你可以得到一个工作的。

<tr>
    <td>
        <input type="radio" name="speed" value="slow" id="Slow">
    </td>
    <td align="left"><label for="Slow">Slow</label></td>
</tr>

如果选择此方法，则必须将JavaScript代码更改为下面的代码。

$('#speed-form input[type="radio"]').change( function () {

    if ( $(this).prop("checked") )
        SG.setSpeed( $(this).val() );

});