Javascript and/or CSS 是否有可能让用户点击一个元素？

Question

我正在制作一个由箭头键控制的游戏。你可以看到它here。

我注意到的一个用户体验问题是，如果用户单击 "Set Speed" 按钮来更改蛇的速度，那么当他们尝试使用箭头向上或向下移动蛇时键，因为它们仍然在 "Set Speed" 单选按钮框中单击，所以它所做的只是在单选按钮之间切换。如果可能的话，我希望一旦他们点击 "Set Speed" 按钮，他们就会被点击开箱，这样他们的箭头键就可以控制蛇的移动。 "Set Speed" 框的事件侦听器是

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

我想知道是否可以添加一行或两行来单击 #speed-form 中的用户。

Answer 1

首先，您的问题与 HTML 相关，而不是与 JavaScript 相关。在HTMLlabel元素扩大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() );

});

Answer 2

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

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

在以下人员的帮助下：Is there any way in JavaScript to focus the document (content area)?

Answer 3

edit: 看来我的反应有点慢，而且几乎和另一个一样。我将留下这个消息，因为我无法对其发表评论。我将用斜体表示唯一的区别。

这应该会从单选按钮上移除焦点。 如果这不起作用，您可能必须将焦点设置在包含游戏的对象上。

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

Javascript and/or CSS 是否有可能让用户点击一个元素？

Is it possible with Javascript and/or CSS to make a user click out of an element?

html

javascript

css

jquery

user-experience