通過事件的處理程序內的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查詢

回答

相關問題