單擊/更改單選按鈕之前，焦點正在運行。 是否可以在焦點之前運行單擊/更改？

Question

在下面，您將看到我正在處理的代碼以及隨附的JSFiddle。

問題：

1. 焦點在單擊/更改之前運行，因此頁邊距在選擇單選按鈕之前已經移動。

請解釋代碼，以便我可以學習。 如果您沒有解決方案，則任何提示或指示也將有所幫助。 提前致謝！

http://jsfiddle.net/nLgqhqwc/6/

的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

您必須在捕獲階段監聽click事件。 你可以做：

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

在這里看看以了解捕獲和冒泡階段的區別。

主要問題是您不會使用jQuery。

並非所有瀏覽器都支持事件捕獲（例如，Internet Explorer版本低於9）不支持事件捕獲，但是所有瀏覽器都支持事件冒泡，這就是為什么它是將處理程序綁定到所有跨瀏覽器抽象（包括jQuery）中的事件的階段。 jQuery等同於JavaScript的addEventListener方法

因此，您不必擔心事件順序。 您可以解決簡單 。