Simulate a click() programmatically on a Div

Question

I'm trying to fire an event programmatically. My problem is that I have two SVG on two DIVs and I want to be able to change the border of the DIV I have clicked. To do that I thought to pass the DIV inside my classes and then trigger a click on it once I click on anything. (if there is a better way, please tell me)

I have the following code:

div = querySelector(divName);
svgElement = new svg.SvgSvgElement();
div.append(svgElement);
div.onClick.listen(_setBorders(1));

later I pass the svgElement to another class

ell.show(svgElement);

where show is

show(svg.SvgElement element) {
  if (element.parent is DivElement){
    _parentDiv= element.parent as DivElement;
    element.children.add(_group);  
  }
}

_parentDiv is of course a DivElement, which I use for an internal onClick()

_onClick(MouseEvent e) {
  window.console.info("onClick Ell");
  _parentDiv.click();
}

I'm expecting to see the _setBorders(1); I defined with the main div, but it doesn't work. The weird thing is that when I check with the debugger set to the _parentDiv.click() I see that _parentDiv has the event correctly set. I suppose click() doesn't work as I expected. Any Idea?

Answer 1

If you want that _setBorders(1) is called on click events you have to use :

div.onClick.listen((_) => _setBorders(1));