Geek Answers Handbook

Dojo how to make an onclick event on a div

An attenuation pattern has appeared on the Internet. http://docs.dojocampus.org/dojo/fadeOut?t=tundra

but I want to do something else. I want people to click on the text immediately, then the text will disappear.

in my code there is a div wrap text

<div id='parentNode'> <div id='textDiv' onClick='whenClickAnyWhereWithinThisDiv_performFadeOut()'> <div id='iconDiv'/> <div id='messageDiv'/> </div> <div>

The code, as shown below, I want when people click anywhere in the text field, then all the text Div will disappear ... mm ... why does my code not 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); }
+5
javascript dojo
source share
1 answer

If I understand what you are trying to do, I think you can do 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 (eg 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 is bubbling so that it will be caught by textDiv.

Here are some useful links:

Let me know if I misunderstood your question and I will clarify my answer. Hope this helps.

+8
source share

More articles:


All Articles