CODEWITHSUNDEEP
javascriptjqueryhtml
Seb
Seb

Reputation: 237

JS stop highlighting occurring on (double)click

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.

Upvotes: 5

Views: 2560

Answers (2)

em_
em_

Reputation: 2259

Assuming you're talking about the element getting highlighted after a double click.

I found a different post asking a similar question. - link

It sounds like there isn't a trivial way of disallowing this, but you could "de select" the element after it has been selected.

Hope this helps.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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.

Upvotes: 5

Related Questions