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.

What exactly do you mean by highlighting? Are we talking about a text selection or a CSS style you have set up? — Jnatalzia, Jul 15 '13 at 21:16
I've setup this http://jsfiddle.net/wEf53/ to demonstrate, if you double click on the word "Yesterday" it will still highlight it. — Seb, Jul 15 '13 at 21:20

score 5 · Accepted Answer · answered Jul 15 '13 at 21:20

5

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.

answered Jul 15 '13 at 21:20

adeneo

312,895
29
395
388

Although the `var elem = $(".show-full-duedate"); elem.toggleClass('focused', e.is(':visible')) .toggle(e.is(':visible'))` bit doesn't work – Seb Jul 15 '13 at 21:24
I changed that a little bit, but had to guess as to what it was you where trying to do, but it seemed like you toggled classes and visibilty based on the elements visibility etc. – adeneo Jul 15 '13 at 21:25
Well my old fashioned if statements work anyways :) this is what works the best based on your answer `event.target.onselectstart = function() { return false; };` ;P – Seb Jul 15 '13 at 21:41
Yes, that's the line that prevents selection, the next line prevents dragging, and those lines are what I usually add to custom buttons etc. to avoid this exact issue, which can be really annoying. – adeneo Jul 15 '13 at 21:51

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

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.

edited May 23 '17 at 12:33

Community

1
1

answered Jul 15 '13 at 21:20

em_

2,134
2
24
39

JS stop highlighting occurring on (double)click

2 Answers2