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

hi have you found a workaround for this issue? i'm getting the same problem — M Rijalul Kahfi, Oct 23 '13 at 02:31
Wishi i am confused little bit you want rightclicks to move the graph means graph will be move when you click right like happening currently in left click? — Just code, Oct 25 '13 at 05:35
the nodes are links. so they should open on normal clicks. and left clicks can move the graph. — wishi, Oct 25 '13 at 09:44
Not sure if you extended something somewhere else, but are you bound to the `oncontextmenu` somewhere? — carter, Oct 25 '13 at 15:22

score 1 · Answer 1 · answered Oct 24 '13 at 09:41

1

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.

answered Oct 24 '13 at 09:41

PKK

56
5

score 1 · Answer 2 · edited May 23 '17 at 12:21

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.

Gah, So close! Whoever read my answer and new a little more about the event object had the answer on a plate. Oh well :) — Ben Smith, Oct 28 '13 at 13:24

score 1 · Accepted Answer · answered Oct 27 '13 at 11:09

$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

Add onRightClick to JavaScript lib Hypertree

3 Answers3