Dojo, how to do onclick event on a DIV

dojo, javascript

Solution

If I understand what you are trying to do, I think you can accomplish it with this:

HTML

 <div id='parentNode'> 
    <div id='textDiv'> 
      <div id='iconDiv'>this is icon div</div> 
      <div id='messageDiv'>this is message div</div> 
    </div> 
 <div>

JavaScript

// do it when the DOM is loaded
dojo.addOnLoad( function() {
  // attach on click to id="textDiv"
  dojo.query('#textDiv').onclick( function(evt) { 
    // 'this' is now the element clicked on (e.g. id="textDiv")
    var el = this; 
    // set opacity
    dojo.style(this, "opacity","1"); 
    // do fade out
    dojo.fadeOut({ 
      node: this, 
      duration: 2000, 
      // pass in an onEnd function ref that'll get run at end of animation
      onEnd: function() { 
        // get rid of it     
        dojo.query(el).orphan() 
      } 
    }).play() 
  });
});

The click will bubble up so it'll be caught by `textDiv.`

Here are some helpful links:

- Dojo Animation quickstart

- dojo.byId vs. dijit.byId

Let me know if I misunderstood your question and I'll update my answer. Hope this helps.

Problem

There was a fade out sample in the internet.. http://docs.dojocampus.org/dojo/fadeOut?t=tundra but i want to do something different.. i want people directly click on the text then the text will fade out. in my code there is a div wrap the text ``` <div id='parentNode'> <div id='textDiv' onClick='whenClickAnyWhereWithinThisDiv_performFadeOut()'> <div id='iconDiv'/> <div id='messageDiv'/> </div> <div> ``` Code as show below, what i want is, when people click anywhere within the textDiv, then the whole textDiv will fade away..hmm.....why my code doesn`t work??? ``` function whenClickAnyWhereWithinThisDiv_performFadeOut () { ... ... dojo.connect(dijit.byId('textDiv'), "onClick", fadeOutAndRemove(parentNode, textDiv)); } function fadeOutAndRemove (parent, currentDiv) { // just assume i can get the parent Node, and the current div, which will be textDiv var objectId = currentDiv.getAttribute('id'); dojo.style(objectId, "opacity", "1"); var fadeArgs = { node: objectId, duration: 2000 }; dojo.fadeOut(fadeArgs).play(); setTimeout(function() { parent.removeChild(currentDiv);}, 2000); } ```

Original source