Question

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

问题：

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

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

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

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

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

的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');
    });

});

Answer 1

您可以在用户查看.panel时触发该事件。为此，您必须替换点击：

$('.panel').click(function () {

click OR hover with the mouse。就是这样：

$('.panel').on('click mouseover',function () {

以下是示例小提琴：http://jsfiddle.net/nLgqhqwc/10/

另一种方式

如果没有聚焦，请将填充更宽。这样.panel的内容就不会移动（并且用户可以轻松点击它），保证金仍然存在：

.panel{
    padding:15px 30px;
}

.panel-primary {
    margin:0 15px 0 15px;
    padding: 15px;
}

链接：http://jsfiddle.net/nLgqhqwc/11/

Answer 2

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

document.querySelector('.panel').addEventListener('click', doSomething, true);

看看here，了解捕捉和冒泡阶段的区别。

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

并非所有浏览器都支持事件捕获（例如，Internet 资源管理器版本低于9但不是所有人都支持事件冒泡，这就是为什么它是用于将处理程序绑定到事件的阶段在所有跨浏览器抽象中，包括jQuery。 jQuery equivalent of JavaScript's addEventListener method

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

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

2 个答案: