gpt4 book ai didi

javascript - 用 Google Closure 编写的事件监听器中的点击事件不起作用?

转载 作者:行者123 更新时间:2023-11-30 14:22:48 25 4
gpt4 key购买 nike

我是 JavaScript 的新手,我的问题是当我在 chrome 浏览器控制台中尝试这个 JS 时它可以工作,但在我的 JS 文件中它不工作

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

HTML:

<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>

JS:

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

这段代码有什么问题

  1. 当我尝试不使用 goog.providegoog.require 时,它向所有人显示错误
  2. 当我使用它时,对点击事件没有任何反应
  3. 还有其他最好的在线资源吗

请帮助我

最佳答案

所以这里有一些我要更改的地方。

最大的问题是您永远不会调用 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,但我觉得这可能只是迈向更大目标的第一步,您会想要这样做。

关于javascript - 用 Google Closure 编写的事件监听器中的点击事件不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52463104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com