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>元素的树和单击行为

1 个答案: