JS stop highlighting occurring on (double)click

Question

I have a situation where if a button is doubleclicked on it highlights the whole button, which is quite annoying, so I've tried to fix it by adding preventDefault() to the function to stop highlighting occurring, although I can't seem to stop it happening :(
Could anyone please tell me why this is ignoring the event.preventDefault(); and highlighting the button/text anyway?:

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

I am using the latest version of Chrome to test.
Also, setting the CSS to stop highlighting stops all of the highlighting of the button, even when its not been clicked on, so that is not an option.

Answer 1

Try:

$(".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

The three last lines will prevent the selection.