Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 Tree node double click highlights text

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.

like image 733
user1772516 Avatar asked Nov 12 '22 19:11

user1772516


1 Answers

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.

like image 153
zongweil Avatar answered Nov 15 '22 08:11

zongweil