Add onRightClick to JavaScript lib Hypertree

Question

I'm currently working (a repo is here) on a Hypertree graph, which I want to use from the JavaScript InfoVis Toolkit. The issue is as follows: I added the specific events to the Hypertree, which are onClick and onRightClick.

 Events: {
          enable: true,
          onClick: function(node, eventInfo, e) {
              ht.controller.onComplete();
          },
          onRightClick: function(node, eventInfo, e) {
              ht.controller.onComplete();
          },
      },

Then I simply attached the veent handlers to the Hypertree labels, just modifying demo-code a little:

//Attach event handlers and add text to the
  //labels. This method is only triggered on label
  //creation
  onCreateLabel: function(domElement, node){
      domElement.innerHTML = node.name;

      $jit.util.addEvent(domElement, 'click', function () {
          ht.onRightClick(node.id, {
              onComplete: function() {
                  ht.controller.onComplete();
              }
          });
      });


      $jit.util.addEvent(domElement, 'rclick', function () {
          ht.onClick(node.id, {
              onComplete: function() {
                  ht.controller.onComplete();
              }
          });
      });
  },

That's pretty straight forward. The documentation for Hypertree events is in Options.Events.js. Now I load the page... and I have the left.clicks. But no right clicks... I want the RightClicks to move the graph and the onClicks to open a link from the DOM Element node. Can someone please give me a pointer here?

Best, Marius

Answer 1

$jit.util.addEvent(obj, type, fn) is a shortcut for obj.addEventListener(type, fn, false). So you are trying to bind to 'onrclick' event. But there is no such event in javascript. For detecting right click you just need to replace your 'rclick' to 'mouseup', and in callback you should check for button to be the right one. Here is the code:

$jit.util.addEvent(domElement, 'mouseup', function (event) {
   // detecting right button
   if (event.button != 2) {
       return;
   }
   ht.onClick(node.id, {
       onComplete: function() {
           ht.controller.onComplete();
       }
   });
});

Also you don't need to use Options.Events.js for this purpose, so you can remove that code

Answer 2

The only fault I can see in the "Events"-section, is a trailing comma behind onRightClick. It really shouldn't affect the code if you use IE>8, but it's worth a try.

Answer 3

Ok, this is an answer on why I think your solution is not working.

$jit.util.addEvent(domElement, 'rclick', function ()

There is no such jquery event as 'rclick'.

Typically using jquery you would detect a right-click using the following:

$('#element').mousedown(function(event) {
 if (event.which === 3) { 
  alert('Right mouse button pressed');
 }
});

Hence in your example you would use 'mousedown' instead of 'rclick'. However, looking at the documentation for addEvent:

$jit.util.addEvent(elem, 'click', function(){ alert('hello'); });

The example seems to suggest that the event object can not be passed in to addEvent's function parameter, meaning that it won't be possible to detect that the right mouse button has been clicked.

Might be worth posting your question directly to InfoVis' author, as I too will be interested to see whether it is possible to hook-up the right mouse button.