AnsweredAssumed Answered

Connect/disconnect event listener based on display of HTML element

Question asked by rcsellman on May 19, 2015
Latest reply on May 19, 2015 by rcsellman

In my application, I would like for an event listener to be hooked up upon the display of an HTML element.  Right now, I have a button that basically toggles the display of an element.  I would like to hook up a click event on the map, only when that element is showing. So, when the user clicks a button after the application loads, the element's display is set to "block" and the handler is wired up.  Then, if the user hits the button again, the display is set back to, "none" and the handler is disconnected.

 

I have to believe there is a better way to handle this, so I am open to changing the logic all together.  Regardless, here is what I have so far:

 

function toggleGeovista() {

  var geovistaElement = document.getElementById('geovistaWidget');


  if (geovistaElement.style.display == 'block') {

  geovistaElement.style.display = 'none';

  } else {

  geovistaElement.style.display = 'block';
  }


  //hook up map click listener based on the display of geovistaElement 
  var geovistaDisplay = geovistaElement.style.display;

  if (geovistaDisplay == 'block') {

  alert("Geovista Widget is showing");

  //var eventHandler = map.on("click", openGeovistaWidget);
  var eventHandler = connect.connect(map, "onClick", openGeovistaWidget);

  } else if (geovistaDisplay == 'none') {

  alert("Geovista Widget is NOT showing");

  //eventHandler.remove();
  connect.disconnect(eventHandler);

  }
  }

I have tried using the "on" method for handling events as well as the dojo/_base/connect module.  In both approaches, I can get the listener to connect but cannot disconnect it.

 

Any help is appreciated!

 

Ryan

Outcomes