在点击/更改单选按钮之前，焦点正在运行。是否可以在焦点之前运行点击/更改？

问题描述

下面你会看到我正在处理的代码和一个包含的JSFiddle。

Below you will see the code I am working on and an included JSFiddle.

问题：

1. 焦点在点击/更改之前运行，因此在选择单选按钮之前边距正在移动。

请解释一下代码，以便我可以从中学习。如果您没有解决方案，任何提示或方向也会有所帮助。提前致谢！

Please explain the code so I can learn from this. If you do not have a solution any hints or direction would also be helpful. Thanks in advance!

HTML

HTML

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <select>
        <option>option</option>
    </select>
</div>

<div class="panel">
    <input type="radio"/>
</div>

<div class="panel">
    <input type="checkbox"/>
</div>

CSS

CSS

.panel{
    padding:15px;
    background:grey;
    margin-bottom:15px;
}

.panel-primary{
    margin:0 15px 0 15px;
    background:blue;
    margin-bottom:15px;
}

jQuery

jQuery

$(document).ready(function () {

    $('.panel').click(function () {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary');
        $(this).addClass('panel-primary');
    });

    $('input, select').bind('focus blur', function (event) {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary');
        $(this).closest(".panel").addClass('panel-primary');
    });

    $('input[type=radio]').change(function () {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary mrgn-lft-lg');
        $(this).closest(".panel").addClass('panel-primary');
    });

});

推荐答案

您必须在捕获阶段监听点击事件。你可以这样做：

You must listen the click event on capturing phase. You can do:

document.querySelector（'。panel'）。addEventListener（'click'，doSomething，true）;


看看了解捕获和冒泡阶段的区别。

Take a look here to understand the difference of capturing and bubbling phases.

主要问题是你不会使用jQuery。

The main problem is you won't use jQuery.

因此，您不应该关注事件顺序。您可以解决。

Therefore, you shouldn't concern about event order. You may resolve simple.

这篇关于在点击/更改单选按钮之前，焦点正在运行。是否可以在焦点之前运行点击/更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！