Dojo,如何在DIV上进行onclick事件

时间:2009-07-10 00:53:40

标签: javascript dojo

互联网上有一个淡出的样本.. http://docs.dojocampus.org/dojo/fadeOut?t=tundra

但我想做点不同的事情...... 我希望人们直接点击文字然后文字会淡出。

在我的代码中有一个div包装文本

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

代码如下所示,我想要的是,当人们点击textDiv中的任何地方时, 然后整个textDiv将消失......嗯.....为什么我的代码不起作用???

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);
}

1 个答案:

答案 0 :(得分:8)

如果我明白你要做什么,我想你可以用这个来完成它:

<强> 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() 
  });
});

点击会冒出来,所以它会被textDiv.

捕获

以下是一些有用的链接:

如果我误解了你的问题,请告诉我,我会更新我的答案。希望这会有所帮助。