Question

我是Java 脚本的新手，我的问题是，当我在chrome浏览器控制台中尝试此JS时，它可以工作，但是在我的JS文件中，它不起作用

我附上了代码，对于HTML设计，我使用了Google MDL，对于JS，我使用了 Google Closure

HTML：

(async function() {
  var currentData = someInitialData;
  // loop will break after you've processed all the data
  while (currentData.hasMoreData()) {
    // get next bunch of data & set it as current
    currentData = await Run(currentData);
    // do some processing here or whatever
  }
})();

JS：

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/add.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
</body>
</HTML>

此代码有什么问题

当我尝试不使用goog.provide('sample.add'); goog.require('goog.dom'); goog.require('goog.events'); sample.add = function() { self = this; }; goog.inherits(sample.add, goog.base); sample.add.prototype.bindEvent = function() { goog.events.listen(goog.dom.getElement('add'), goog.events.EventType.CLICK, function(e) { alert("HAPPY"); }); };和goog.provide时，它向所有人显示错误
使用此功能时，对点击事件没有任何反应
是否还有其他最佳资源可以在线观看

请帮助我

Answer 1

所以我在这里有几件事要改变。

最大的问题是您永远不会调用sample.add或sample.add.bindEvent。

然后，必须将脚本移动到按钮下方，以便在脚本运行时该按钮位于页面上。或者，您也可以使用JS来延迟脚本的运行，具体取决于您自己，但是我会说，在body标签结尾之前看到脚本是很普遍的。

<HTML>
 <head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <div>
     <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
       <i class="material-icons">add</i>
     </button>
   </div>
   <script src="../js/add.js"></script>
</body>
</HTML>

此外，除非您特别需要，否则我将放弃goog.base调用。如果确实需要，请说明原因，也许我们可以提供帮助。

最后，我们只需要进行一些细微调整即可；

goog.provide('sample.add');

goog.require('goog.dom');
goog.require('goog.events');
/** @export */
sample.add = function() {
    self = this;
    self.bindEvent();
};
sample.add.prototype.bindEvent = function() {
    goog.events.listen(goog.dom.getElement('add'),
         goog.events.EventType.CLICK, function(e) {
            alert("HAPPY");
    });
};
sample.add();

我想您可以直接调用sample.add.bindEvent，但是我觉得这可能只是迈向更大的第一步，而您想这样做。

用Google Closure编写的事件监听器中的Click事件不能正常工作吗？

1 个答案: