Question

I have a tree view (similar to http://mbostock.github.com/d3/talk/20111018/tree.html) except I changed the expand/contract node from a single click to the double click event:

That is, instead of

.on("click", function(d) { toggle(d); update(d); });

I am using:

.on("dblclick", function(d) { toggle(d); update(d); });

It functions fine. The issue is that the double click highlights the text label on the node. It does not effect the transition, but it is very annoying. Does anyone know of a way prevent this from happening, other than deleting the node and adding it back at the end of the transition?

BTW, I already tried adding

d3.event.preventDefault()

inside the double click event, and it did nothing to help.

Answer 1

Google returned the following result:
http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

The code on that page is

$(function(){
    $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;});
            }
        });
    });
    $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

In this case, however, you can replace ‘.noSelect’ with ‘.node’, and it should disable text highlighting for all of your nodes.