javascript - 如何防止元素保持活跃？

Question

我在单页应用程序上有一个模式，当用户执行特定操作时会弹出。如果用户按下其中一个按钮(是/否)，模式将关闭。如果再次弹出相同的模式，最后按下的按钮将保持 Activity 状态。我使用伪类 :active 来改变按钮按下时的背景。

这发生在一些安卓触控设备上。

HTML:

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p class="modal-title" data-bind="lang: Title"></p>
            </div>
            <div class="modal-body" data-bind="lang: Body">
            </div>
            <div class="modal-footer">
                <div class="exitFooterButtons">
                    <div class="ExitButton">
                        <div data-event="yes" data-bind="lang: 'Modal.Yes'"></div>
                    </div>
                    <div class="ExitButton" data-event="no" data-bind="lang: 'Modal.No'"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

modal .modal-content .modal-footer .ExitButton {
    line-height: 54px;
    width: 50%;
    display: table-cell;
    border-top: 1px solid black;
    cursor: pointer;
    font-size: 18px;
    height: 54px;
    border: 0;
    margin: 0;
    float: left;
    color: #c6c6c6;
    border-radius: 0;
    background: url(../Images/headerRowBackground.png) repeat-x; 
}

并且:活跃

modal .modal-content .modal-footer .ExitButton:active {
    background: url(../Images/reverseHeaderRowBackground.png) repeat-x;
}

如果我第一次按 NO，然后第二次返回模态，那么 NO 仍然有效。如果我然后按 YES 并第三次再次返回，则它们都处于 Activity 状态。

Answer 1

我设法通过用 buttons 替换 div 来解决这个问题

        <div class="exitFooterButtons">
            <div class="ExitButton">
                <button data-event="yes" data-bind="lang: Languages.Yes"></button>
                <button data-event="no" data-bind="lang: Languages.No"></button>
            </div>
        </div>

总之，某些 android(~4.2) 设备在将它们分配给 div 的 时不喜欢 :active 伪类。