实例化MDCSlider（纯JavaScript）时出现未捕获类型错误

问题描述 #

按照官方说明实现MDCSlider，组件能显示但无交互响应（Chrome、Firefox、Edge均测试过），控制台报错：

caught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Object.registerInteractionHandler (material-components-web.min.js:1:423625)
    at y.registerRootHandlers (material-components-web.min.js:1:10842)
    at y.init (material-components-web.min.js:1:8957)
    at y.a (material-components-web.min.js:1:2397)
    at new y (material-components-web.min.js:1:5773)
    at t (material-components-web.min.js:1:423774)
    at C.createRipples (material-components-web.min.js:1:423874)
    at C.initialize (material-components-web.min.js:1:421464)
    at C.a (material-components-web.min.js:1:2301)
    at new C (material-components-web.min.js:1:423923)

现有代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
</html>
<body>
  <div class="mdc-slider">
    <div class="mdc-slider__track">
      <div class="mdc-slider__track--inactive"></div>
      <div class="mdc-slider__track--active">
        <div class="mdc-slider__track--active_fill"></div>
      </div>
    </div>
    <div
      class="mdc-slider__thumb"
      role="slider"
      tabindex="0"
      aria-label="Continuous slider demo"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="50"
    >
      <div class="mdc-slider__thumb-knob"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

script.js代码 #

const MDCSlider = mdc.slider.MDCSlider;
const element = document.querySelector(".mdc-slider");
const slider = new MDCSlider(element);

问题原因与解决方法 #

你HTML代码里存在DOM结构错误：<body>标签被放在了</html>闭合标签之后，这会导致浏览器解析DOM时出现异常，MDCSlider初始化时无法正确获取所需的上下文元素，进而触发addEventListener相关的未定义错误。

只需把</html>标签移到整个文档末尾，确保<body>标签在<html>内部即可修复：

修正后的HTML结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <div class="mdc-slider">
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div
        class="mdc-slider__thumb"
        role="slider"
        tabindex="0"
        aria-label="Continuous slider demo"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-valuenow="50"
      >
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

修正后，MDCSlider即可正常初始化并响应交互。

内容的提问来源于stack exchange，提问作者NotARobot