CODEWITHSUNDEEP
javascripthtml
zidanow
zidanow

Reputation: 700

simulate click in javascript (outside the window too..)

I'm trying to simulate clicks dynamically, i already did it for three indented tree with this function : 

document.onmousemove = function(e) {
        cursorX = e.pageX;
        cursorY = e.pageY;
}

function ret_vw(v) {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return (v * w) / 100;
}

function simulateClick(x, y) {
    var s = d3.select(document.elementFromPoint(x, y));
    s.on("click")(s.datum());
}

function multiple_click() {
    //onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
    if (cursorX >= ret_vw(15.25) && cursorX < ret_vw(42)) {
        simulateClick(cursorX + ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
        simulateClick(cursorX + ret_vw(56) - window.pageXOffset, cursorY - window.pageYOffset);
    }
    else if (cursorX >= ret_vw(43.25) && cursorX < ret_vw(70.25)) {
        simulateClick(cursorX - ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
        simulateClick(cursorX + ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
    }
    else if (cursorX >= ret_vw(71.25)) {
        simulateClick(cursorX - ret_vw(28) - window.pageXOffset, cursorY - window.pageYOffset);
        simulateClick(cursorX - ret_vw(56) - window.pageXOffset, cursorY - window.pageYOffset);
    }
    else
        console.log("no , cursorX = " + cursorX + " , cursorY = " + cursorY + " vw = " + ret_vw(15.25));
}

And it works for this below, if i click on one, it will click on the two others idented three :

(Without Click)

enter image description here

(With Click)

enter image description here

But i got two problem, if i push one of the indented tree outside of the window, it will not work, and secondly, i need to do it dynamically because i will not always have 3 indented three (i can have like two, four, five idented tree...)

Here is the picture for the case where my function multiple_click will not work (tree outside the window..) :

enter image description here

Thanks for the help guys !

(source of the idented tree with d3.js : https://bl.ocks.org/mbostock/1093025)

Upvotes: 3

Views: 455

Answers (1)

Shushan
Shushan

Reputation: 1225

I would suggest that instead of using mouse events to trigger the click - which eventually calls this click function:

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

You would make a new mouseClick function which replaces the current one which happens on mouse click. This calls the current click function for all matching items. This is the concept:

function mouseClick(d) {
  // Assuming you have multiple roots (example only has root)

  for (root in roots) {
      // Find d in the current root (by name?)
      matching_d = ...  

      click(matching_d)
  }
}

Upvotes: 1

Related Questions