通过事件的处理程序内的DOM查询

我正在使用DOJO创建一些动画。我试图在鼠标悬停该部分时在部分内部创建h1动画。通过事件的处理程序内的DOM查询

这并不工作：

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
     <div id="section"> 
      <div id="title">Something</div> 
     </div> 
    </body> 

</html>

的JavaScript：

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) { 
    var section = dom.byId("section"), 
     title = dom.byId("title"); 

    on(section, mouse.enter, function(evt){ 
     fx.slideTo({ 
      node: title, 
      top: "0" 
     }).play(); 
    }); 

    on(section, mouse.leave, function(evt){ 
     fx.slideTo({ 
      node: title, 
      top: "200" 
     }).play(); 
    }); 
});

我想获得工作（它没有）：

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
     <section> 
      <h1>Something</h1> 
     </section> 
    </body> 

</html>

的JavaScript：

require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/mouse","dojo/query","dojo/domReady!"], function(fx, on, dom, mouse,query) { 
    var section = query("section"); 

    on(section, mouse.enter, function(evt){ 
     fx.slideTo({ 
      node: query("h1",this), 
      top: "0" 
     }).play(); 
    }); 

    on(section, mouse.leave, function(evt){ 
     fx.slideTo({ 
      node: query("h1",this), 
      top: "200" 
     }).play(); 
    }); 
});

我试图让h1元素，使用query("h1",this)，以使其滑动。我得到的只是我开发工具中的一个错误。我试图寻找解决方案，但我无法找到一个解决方案。我该如何解决这个问题？

Uncaught TypeError: Object [object HTMLHeadingElement] has no method 'getBoundingClientRect'

来源

2012-09-18 Florian F.

的问题是，query不返回节点，它返回一个NodeList。你可以在错误中看到这个，它指的是Object [object HTMLHeadingElement] - 这实际上是一个类似Array的对象（Object [...]），它包含一个单独的项目HTMLHeadingElement。

您需要れ，所以最简单的解决办法是改变这一点：

node: query("h1", this)

这样：

node: query("h1", this)[0]

注意这只会只要查询返回一个有效的节点工作。否则，您将会遇到越界错误。

You can see more in the API documentation for dojo/query.

来源

2012-09-18 11:34:05 OverZealous

通过事件的处理程序内的DOM查询

回答

相关问题