Bootstrap 4.2.1 - 无法在“文档”上执行“querySelector”：“javascript:void(0);”不是有效的选择器

Question

我正在开发一个项目，该项目是在 bootstrap 4.0.0 上开始构建的。在这个项目中，每当新版本（ 4.1.0 ， 4.1.3 ）的引导程序出现时，我都会定期更新引导程序，并且所有的事情都运行良好，直到我从那里更新到 bootstrap 4.2.1单击文档时，我在控制台中遇到错误

未捕获的 DOMException：无法执行“querySelector” '文档': 'javascript:void(0);'不是有效的选择器。

我发现它是由于下拉菜单而发生的，因为这个错误下拉菜单不起作用。我还检查了，如果我使用 href="javascript:void(0);", href="#!" 会发生错误，但如果我使用锚标记没有 href 或 href="#" 那么它工作正常。

注意：- 我需要在地址中使用 href="javascript:void(0); 作为 href="# 的解决方案链接看起来不漂亮，页面滚动到顶部

<div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="javascript:void();" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

这是我的codepen

Answer 1

我遇到了这个问题，对此reported issue 的评论使我了解了解决方案。我正在从 Bootstrap 文档中复制示例，我不得不从父链接中删除 ID，而是在子链接的容器上使用该 ID，没有 aria-labeledby 属性，并在父链接中添加引用数据目标属性。

这个例子显示了我在做什么，导致控制台错误：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
        Commercial
    </a>
    <div class="dropdown-menu" aria-labelledby="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

这是对我有用的解决方案：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Individual
    </a>
    <div class="dropdown-menu" id="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

Answer 2

=== bootstrap.js v4.2.1 的变化 ===

找到下面的块

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

只需要添加try and catch异常如下

替换

return selector && document.querySelector(selector) ? selector : null;

与

try {
    return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
    return null;
}

=== bootstrap.min.js v4.2.1 的变化 ===

替换

return e&&document.querySelector(e)?e:null

与

try{return e&&document.querySelector(e)?e:null}catch(err){return null;}

Answer 3

这是适合我的解决方案

来自 Bootstrap 4.1.3 的片段

getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || '';
    }

    try {
      return document.querySelector(selector) ? selector : null;
    } catch (err) {
      return null;
    }
},

从 Bootstrap 4.2.1 替换它

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

感谢 PixemWeb github 解决方案

更多信息请点击链接https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

Answer 4

getSelectorFromElement: function getSelectorFromElement(element) {
            var selector = element.getAttribute('data-target');
            if (!selector || selector === '#') {
                var hrefAttr = element.getAttribute('href');

                //selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
                selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
            }

            return (selector && document.querySelector(selector)) ? selector : null;
        }

由于 document.querySelector 找不到像“#home”这样的 id，因此该函数通过错误，因此如果任何字符串不包含 # 前缀，则通过错误。 所以替换这个：

selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';

从这里

selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';

Answer 5

一个建议：

删除空的href 属性并添加cursor:pointer 样式以使A 元素可点击。

#dropdownMenuLink {
  cursor: pointer; /* not necessary for Bootstrap */
  color: white /* change if you want */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>

Answer 6

正如其他人在 cmets 中所说的那样

这是 Bootstrap 4.2.1 中的一个错误，将在 4.3.0 中修复： github.com/twbs/bootstrap/issues/27903

只需要用户4.3.0的bootstrap

只需替换这个

 <script src="https://cdn.rtlcss.com/bootstrap/v4.3.0/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

有了这个

<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

Answer 7

确保下拉菜单项的锚点是#，而不是路径。

解决方案： 我使用链接而不是React 中的a 并用简单的<a href="#" ... 替换它，它现在可以工作了。