Rectangle 27 1

This will do it in all the major browsers, though it does unfortunately select text and then unselect it again when you double click:

document.ondblclick = function() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
};

Best working one so far. I dont mind the flicker at all. It was just ugly because i had a modal popup on dbl click and and you could see the highlighted word under the faded out background. Thanks!

javascript - Double Click Selects Text in dynamically added H1, how do...

javascript jquery html web-applications
Rectangle 27 1

This will do it in all the major browsers, though it does unfortunately select text and then unselect it again when you double click:

document.ondblclick = function() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
};

Best working one so far. I dont mind the flicker at all. It was just ugly because i had a modal popup on dbl click and and you could see the highlighted word under the faded out background. Thanks!

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Double Click Selects Text in dynamically added H1, how do...

javascript jquery html web-applications
Rectangle 27 3

No browser supports a double right click natively, and I would avoid handling such an event since most users would not expect it to work. A right click is often referred to as a context menu click because that's what it is for.

I agree, but we are in 2016 and Web Apps are getting very much attention now. I see dblrightclick(fast and precise) as important as swipe on mobile apps.

What is the use case? I can't imagine how it would be useful but now I'm curious.

javascript - Mouse right double click in Angular2 - Stack Overflow

javascript html dom angular
Rectangle 27 17

Every current major browser provides an API to create a range from a mouse event, although there are four different code branches needed.

function getMouseEventCaretRange(evt) {
    var range, x = evt.clientX, y = evt.clientY;

    // Try the simple IE way first
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToPoint(x, y);
    }

    else if (typeof document.createRange != "undefined") {
        // Try Mozilla's rangeOffset and rangeParent properties,
        // which are exactly what we want
        if (typeof evt.rangeParent != "undefined") {
            range = document.createRange();
            range.setStart(evt.rangeParent, evt.rangeOffset);
            range.collapse(true);
        }

        // Try the standards-based way next
        else if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x, y);
            range = document.createRange();
            range.setStart(pos.offsetNode, pos.offset);
            range.collapse(true);
        }

        // Next, the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x, y);
        }
    }

    return range;
}

function selectRange(range) {
    if (range) {
        if (typeof range.select != "undefined") {
            range.select();
        } else if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

document.getElementById("editor").ondblclick = function(evt) {
    evt = evt || window.event;
    this.contentEditable = true;
    this.focus();
    var caretRange = getMouseEventCaretRange(evt);

    // Set a timer to allow the selection to happen and the dust settle first
    window.setTimeout(function() {
        selectRange(caretRange);
    }, 10);
    return false;
};

It's amazing! Yesterday I made a few other methods. But does not work very well. Your version works fine. Thank you!

javascript - Text selection in div(contenteditable) when double click ...

javascript jquery contenteditable textselection
Rectangle 27 0

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  // For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}

javascript - IE requires double click with custom button - Stack Overf...

javascript jquery html5 css3 internet-explorer-10
Rectangle 27 0

The browser might have queued up more than 1 click event, so whether or not the button is visible for them to keep clicking, the events were already set in motion.

Maybe set a flag in your OK: function

if (!dialogIsClosed) {
      callAjax({"some":"param"});
      $('#dialog').dialog('close');
      dialogIsClosed = true;
}

I would imagine a browser would choose processing an item from the event queue over processing an item from the setTimeout queue.

Thanks. This is a workaround, of course. But I would like to find the reason, if it possible. Though, your answer makes me think that browser may hung up while OS is sending two click events from separate user clicks.

It may or may not be revealing to log the milliseconds of the click event. Hopefully it's resolution is great enough for you to see a difference.

javascript - How fast may be double click? - Stack Overflow

javascript double-click
Rectangle 27 0

Best solution I found was on this post.

$("#rand").on('mousedown', function (event) {
    //event.preventDefault();
});
$("#ran").on('mouseup', function (event) {
    //event.preventDefault();
});
$('#rand').on('dblclick', function (e) {
    if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();
});

As that is a browser's native behavior you can not "disable" it, but you can modify it like the above that removes the selection after it is made.

Thank you Matt, but this causes a flash kinda thing which I'm trying to avoid.

You should closevote/flag as a duplicate instead of copying an answer from another question.

@MattGreen- I can disable it by preventing default on mousedown.

javascript - Disabling double click selection without disabling drag s...

javascript jquery html events browser
Rectangle 27 0

I have run into the exact same problem / requirement. I tried something very similar to Alex's solution, but it doesn't work because the datetimepicker seems to wipe all styles and event bindings when a day is selected (I assume it's being reconstructed, but haven't checked), making it impossible for the dblclick event to fire.

I've come up with a solution which isn't pretty but does work. You can use the datetimepicker's onSelect event to bind a couple of handlers as follows:

(assuming this._$input is a jQuery reference to the input control being used)

this._$input.datetimepicker({
...
onSelect: function() {
    var self = this;
    setTimeout(
            function () {
                $('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
                $('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
            },
            0
        );
}

You're probably wondering why I bind both click and double click, particularly in light of my claim above that double click won't work. It seems that in Chrome, FireFox, Safari, and Opera the event will trigger the "click" event, but in IE it will trigger the "dblclick" event. Also, if you're wondering about the setTimeout, it's required because the popup won't be constructed until after the method is finished, so those selectors won't return anything if executed without it.

You've no doubt noticed that my solution will also close the picker when the currently-selected date is clicked whether or not it's part of a double-click. This is intentional in my case (and I also trigger the same logic in the beforeShow event to wire the handler so clicking on the currently-selected date will always close the picker). In your case, if you want it to work strictly with double clicks, all I can recommend is that you track the time between clicks and make sure they arrive within some threshold.

javascript - How to close DateTimePicker with a double click - Stack O...

javascript calendar datetimepicker
Rectangle 27 0

@palloquin Just updated my answer as your JsFiddle is working on the above modern browsers.

WTF? Are you sure you tested clicking the BOTTOM selectbox (the single line one)??? I've tested using both IE10 and FF 25.0

My mistake I thought this was related to the multi-select box, sorry been looking at another question on select boxes!

javascript - double click on selectbox impossible on modern browsers? ...

javascript html5 double-click
Rectangle 27 0

You should try to invoke ondblclick event, not click event.

yeap, that works, but only at test environment. Where i need it, it's do nothing. What can it be?

@user3893639 Are you sure you have refreshed your web browser cache? Try refreshing the site with Ctrl+F5. If it's not working on production environment, maybe minification of js files spoils something?

javascript - C# webbrowser make a double click at div by id - Stack Ov...

c# javascript html browser
Rectangle 27 0

This will do it in all the major browsers, though it does unfortunately select text and then unselect it again when you double click:

document.ondblclick = function() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    } else if (document.selection) {
        document.selection.empty();
    }
};

Best working one so far. I dont mind the flicker at all. It was just ugly because i had a modal popup on dbl click and and you could see the highlighted word under the faded out background. Thanks!

javascript - Double Click Selects Text in dynamically added H1, how do...

javascript jquery html web-applications
Rectangle 27 0

Every current major browser provides an API to create a range from a mouse event, although there are four different code branches needed.

function getMouseEventCaretRange(evt) {
    var range, x = evt.clientX, y = evt.clientY;

    // Try the simple IE way first
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToPoint(x, y);
    }

    else if (typeof document.createRange != "undefined") {
        // Try Mozilla's rangeOffset and rangeParent properties,
        // which are exactly what we want
        if (typeof evt.rangeParent != "undefined") {
            range = document.createRange();
            range.setStart(evt.rangeParent, evt.rangeOffset);
            range.collapse(true);
        }

        // Try the standards-based way next
        else if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x, y);
            range = document.createRange();
            range.setStart(pos.offsetNode, pos.offset);
            range.collapse(true);
        }

        // Next, the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x, y);
        }
    }

    return range;
}

function selectRange(range) {
    if (range) {
        if (typeof range.select != "undefined") {
            range.select();
        } else if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

document.getElementById("editor").ondblclick = function(evt) {
    evt = evt || window.event;
    this.contentEditable = true;
    this.focus();
    var caretRange = getMouseEventCaretRange(evt);

    // Set a timer to allow the selection to happen and the dust settle first
    window.setTimeout(function() {
        selectRange(caretRange);
    }, 10);
    return false;
};

It's amazing! Yesterday I made a few other methods. But does not work very well. Your version works fine. Thank you!

javascript - Text selection in div(contenteditable) when double click ...

javascript jquery contenteditable textselection
Rectangle 27 0

Maybe try to use a timeout to check if there is an another click after the first click

$(Elm).click(function(evnt){
  clicks++;
  if (clicks == 1) {
    setTimeout(function(){
      if(clicks == 1) 
        // Single click event bind, open
       else 
         // Double click event bind, open
    },2000);
});

Thanks for you answer! But wouldn't the above make single click (select a row) impossible for devices that does support double click?

I do not know if it is possible devices double click, but that you can bypass the single click and check if its a double click ..

javascript - Detect if browser/device supports double click events - S...

javascript android jquery ios mobile
Rectangle 27 0

The problem is that, in some browsers, your onclick handler grabs the first click of the pair, and the ondblclick handler never sees the action. In other browsers the click is seen twice and the double click as well. The potential timing for a double click will vary by operating system, browser, and user configuration.

Handling this in a portable way is, to say the least, difficult.

I would recommend only having click handlers. But have the click handler set a variable, and a timeout. If the timeout is hit without a second click, do the onclick action. If a second click happens in that time, make sure that the timeout will do nothing and do the ondblclick action. The drawback is that this means that your double clicks won't respect the rules of the local operating system, browser, and user configuration.

Does jQuery emulate click correctly with .bind("dblclick", ...) in a cross-browser compliant manner?

@Raynos: There is a big fat warning in api.jquery.com/dblclick that very strongly suggests not.

How can I run different functions when clicking and double clicking us...

javascript
Rectangle 27 0

Double click still fires two single click events... well almost all the time, depending on the browser (see: Javascript Madness: Mouse Events). This is why most recommend implement either single click or double click events but not both.

If you want to detect double clicks at the same time you'll need to get into timing click events proximity to each other and preventing the second, reverting the first, and calling a double click event instead.

It sounds like you don't actually need double clicks though? Just the ability to -when clicking on a slide link- switch to that slide instead of forwarding to the next slide?

Think I might have worded this wrong... I don't want the ability to double click... It's a problem with a second (and subsequent) click when the functions are running.

@Tom Do you have a page we can see this working/see the problem?

jquery - javascript double click problem - Stack Overflow

javascript jquery double-click
Rectangle 27 0

You are checking whether the fill style is equal to the string "black". The problem is, many browsers (including Chrome and FF) reformat color names to RGB strings. So, when you set the fill to "black", it is converted to the RGB string "rgb(0, 0, 0)". So actually, calling d3.select(this).style("fill") will return this rgb string rather than the color name, ensuring that the else branch of your code never runs.

You can avoid having to check the current state of your fill as a style string by using selection.each to store each circle's state as a boolean value and then register its double-click handler, which toggles the boolean and then branches based on its value. Try this:

var node = gnodes.append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) {return d.colr; })
  .each(function() {
    var sel = d3.select(this);
    var state = false;
    sel.on('dblclick', function() {
      state = !state;
      if (state) {
        sel.style('fill', 'black');
      } else {
        sel.style('fill', function(d) { return d.colr; });
      }
    });
  });

Doesn't work for me because all nodes become black rather than just the double clicked one.

Ah, gnodes is an enter selection isn't it. Okay I updated the answer to use selection.each to do the same thing, but for each circle.

javascript - Change the color of nodes on double click in D3 - Stack O...

javascript d3.js attributes double-click
Rectangle 27 0

You are using JavaScript in your example, but you also tagged the question with jQuery, so I assume jQuery is OK to use. In fact, exactly this type of event handling is greatly simplified using jQuerys API, since it normalizes the events for all modern browsers. Highly recommended.

You can delegate the event to the document and detect all double clicks in the entire document using jQuery using the on() function:

If you want to listen on certain elements inside a specific container, try this:

This will listen for any double clicks inside #mainwrapper, but only trigger the handler if a DIV element was the target.

javascript - Which HTML element was Double Clicked in the DOM - Stack ...

javascript jquery html css jquery-mobile
Rectangle 27 0

Try href="javascript:void(0);" to prevent browser from displaying the link in the status bar.

event.preventDefault();

javascript - How can I remove address element highlighting when I doub...

javascript jquery html css
Rectangle 27 0

" It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. "

It's better you can find another way to implement it, such as using the mouse hover and click event togather but not click and double click togather.

javascript - How can I add a click and double click control to a row w...

javascript jquery html angularjs
Rectangle 27 0

I'm afraid that the behaviour is browser dependent:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

Running your code in Firefox, the alert() in the click() handler prevents you from clicking a second time. If you remove such alert, you get both events.

javascript - how to differentiate single click event and double click ...

javascript jquery javascript-events