<ul> 个元素的树和点击行为

Question

我们有一些内部代码使用嵌套的 <ul> 元素以 HTML 形式显示数据树。有一些 jQuery UI 代码使用 slideToggle() 方法切换子树可见性，我们用小加号和减号框覆盖了项目符号字符。这个想法是你点击小加号，相关的子树就会很好地展开。为了在正确的位置呈现框，我们使用 list-style-position: inside.

使用最新版本的 Chromium（版本 76.0.3809.62-1），Javascript 代码不再正常工作。单击要点实际上将事件传递给封闭的 <ul>（而不是列表项本身）。我添加了一个最小的示例来显示下面的行为，但您需要最近的 Chrome/Chromium 才能看到它。这不是切换子树，而是切换列表项是否显示为红色。使用最新版本的 Chromium，

我的问题是是否有正确的方法来捕捉这些点击事件。特别是，我想使用显示的布局，但我想确保单击项目符号点会导致项目符号点的项目切换（而不是周围的树）。我们只是以错误的方式做这件事吗？如果是这样，我们应该怎么做？

<!DOCTYPE html>
<html>
  <head>
    <title>List item test</title>
    <style>
      .red { color: red; }
      ul { list-style-position: inside; }
      ul ul li { background-color: lightgrey; }
    </style>
    <script>
      function on_click (event) {
          tgt = event.target;

          // tgt might be a child of the <li> element. Walk up until
          // we find one. Give up early if we hit a <ul>.
          while (tgt.tagName != "LI") {
              tgt = tgt.parentElement
              if (tgt === null) {
                  return;
              }
          }

          tgt.classList.toggle("red");
          event.stopPropagation();
      }

      window.onload = function() {
          for (ul of document.querySelectorAll("ul")) {
              ul.addEventListener('click', on_click);
          }
      }
    </script>
  </head>
  <body>
    <ul>
      <li>
        <ul>
          <li>AAA</li>
          <li class="red">BBB</li>
          <li>CCC</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Answer 1

这是 Chromium 的一个错误，看起来会在下一个稳定版本中修复。有关所有详细信息，请参阅 https://bugs.chromium.org/p/chromium/issues/detail?id=988414。

<ul> 个元素的树和点击行为

Trees of <ul> elements and on-click behaviour

html

javascript

chromium

dom-events