javascript - JS 停止在(双击)点击时突出显示

Question

我有一种情况，如果双击一个按钮，它会突出显示整个按钮，这很烦人，所以我试图通过将 preventDefault() 添加到停止函数来修复它突出显示，虽然我似乎无法阻止它发生:(
谁能告诉我为什么这会忽略 event.preventDefault(); 并突出显示按钮/文本？:

HTML:

<div class="loading-boundary">
    <div class="redesign-due-date-container">
        <div class="property due_date flyout-owner overdue value-set" style="margin-left:-3px">
            <div class="property-name">
                <span data-icon="calendar" class="calendar glyph toolbar-icon prod"></span>
                <span class="grid_due_date overdue">Yesterday</span>
            </div>
        </div>
    </div>
</div>

JS:

$(".property.due_date").click(function(event) {
    event.stopPropagation();
    event.preventDefault();

    var e = $(".show-full-duedate");

    if (e.css("display") != "block") {
        $(this).addClass("focused");
        e.css("display", "block");
    } else {
        $(this).removeClass("focused");
        e.css("display", "none");
    }

    return false;
});

我正在使用最新版本的 Chrome 进行测试。
此外，将 CSS 设置为停止突出显示会停止按钮的所有突出显示，即使按钮未被单击也是如此，因此这不是一个选项。

Answer 1

尝试:

$(".property.due_date").on('click', function(event) {
    event.preventDefault();

    var elem = $(".show-full-duedate");

    elem.toggleClass('focused', elem.is(':visible'))
        .toggle(elem.is(':visible'))

    document.onselectstart = function() { return false; };
    event.target.ondragstart = function() { return false; };
    return false;
});

FIDDLE

最后三行将阻止选择。