<!DOCTYPE html> 导致 onmousedown 失败答案

【问题标题】：<!DOCTYPE html> causes onmousedown to fail<!DOCTYPE html> 导致 onmousedown 失败
【发布时间】：2017-11-24 06:29:15
【问题描述】：

下午好

我一直在研究“Ajax For Dummies Book”，并且一直在尝试这些示例。去年我在 w3schools 上学习了 html 和 javascript 课程。我已经启动了 Web 服务，但我发现它非常混乱，所以我决定使用 Ajax 来尝试更好地理解。

我遇到了一个相当奇怪的问题。这本书的第 54 页是这个例子：

<html>
   <head>
      <title>JavaScript Event Example</title>
   </head>
   <body onmousedown="document.bgcolor='pink'">
      <h1>Click this page to turn it pink!</h1>
   </body>
</html>

我的问题是当我添加到页面顶部时，鼠标单击不起作用。当我删除它时，它会这样做。我在示例中添加了，因为 W3schools html 课程说您必须添加它

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Event Example</title>
   </head>
   <body onmousedown="document.bgcolor='pink'">
      <h1>Click this page to turn it pink!</h1>
   </body>
</html>

我在 Google 上搜索了“导致 onmousedown 失败”，但没有找到与此相关的任何内容。我确实找到了这篇文章，但它与我的查询无关：'onmousedown event object behaving strangely"。Google 中的其他文章都没有帮助我。

我也在stackoverflow中进行了搜索，但遗憾的是我没有找到任何东西。

我的问题是：为什么当我添加脚本时它会停止工作？

问候菲利普

【问题讨论】：

烧掉这本书，现在。不要去w3schools。我怀疑它失败了，因为您告诉浏览器您使用的是 HTML5，但您使用的是上个世纪的代码。这有效：<body onmousedown="document.body.style.backgroundColor='pink'">
javascript change background color on click的可能重复
你的第一个例子真的有效吗？它不适合我。此外，bgcolor 已过时。（而且使用 w3schools 并没有错）
@ChrisG 我从来没有遇到过 w3schools 的问题，但我再次将它用于语法提醒，而不是用于课程
你的例子都不起作用。 JavaScript 和 DOM 都区分大小写。旧属性称为bgColor，而不是bgcolor。如果您修复了 both 开始工作。无论如何，您的书必须有 10 年以上的历史，而这在 Web 开发中是永恒的——您将更好地利用更新的材料来利用您的时间。

标签： javascript html ajax

【解决方案1】：

使用声明是为了让浏览器知道你使用的html是哪个版本哦，它不是html标签。

例如，假设您使用的是 HTML 4，则引用 DTD，DTD 为 html4 指定了标记语言的规则，以便浏览器正常工作。

因此，在您的情况下，您正在使用的功能/属性“onmousedown”可能无法被浏览器识别，并且浏览器将被卡在默认的 html 格式。因此，当您编写浏览器时，它会识别您的 html 版本，然后呈现数据。

【讨论】：

DOCTYPE 声明（或缺少）肯定会影响渲染，但我不知道在脚本方面有任何具体限制。您甚至可以通过 HTML4 声明成功地使用 HTML5 数据属性。