为什么这个javascript函数需要放在html代码之后？
为什么这个javascript函数需要放在html代码之后？
提问于 2022-01-19 17:55:11
我的网页上有一个“字型太棒”的问号。当用户悬停在上面时，就会通过javascript显示一个弹出窗口。奇怪的是(对我来说)，因为javascript代码是在我的html代码之后，它工作得很好。
这工作
<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>
<script type="text/javascript">
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
</script>但是，如果我将我的javascript放在html之上，它就不工作了。
，这不工作，
<script type="text/javascript">
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
</script>
<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>我之所以这样问，是因为这是一个mvc网站&我想把我的javascript扔到一个"Script“@Sect标签中。我的“脚本”部分位于我的<head>部分的页面顶部。
所以不管怎么说，我只是好奇为什么会这样？
谢谢
Stack Overflow用户
发布于 2022-01-19 18:12:47
放置脚本标记的位置确实很重要，并且可以像您刚才体验的那样影响您的代码。浏览器的行为方式是从上到下解析HTML，因此元素被添加到DOM中，脚本在遇到它们时被执行，这意味着排列元素的顺序和标记确实很重要。如果脚本稍后出现在标记html代码中，将无法找到元素并对它们执行操作，因为这些元素尚未添加到DOM中。
让我们了解一下当浏览器加载带有特定脚本标记的网站时所发生的事情：
- 定义HTML页面，
- 浏览器开始解析HTML
- ，解析器遇到引用外部脚本文件的
script标记并请求该文件。同时，解析器阻塞(除非异步或延迟关键字存在)，在下载脚本一段时间后停止解析剩下的HTML. - ，然后解析器可以继续解析HTML文档的其余部分.
。
因此，在第4步中，由于解析器尚未解析HTML文档，所以他将无法处理HTML的其余部分，这就是为什么您的script标记必须位于底部。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70775517
复制相关文章
相似问题
腾讯云开发者
