Bootstrap 4.2.1 - 无法在'Document'上执行'querySelector':'javascript:void(0);' 不是有效的选择器

Question

我正在开发一个项目,我开始在bootstrap 4.0.0上构建.在这个项目中,我曾引导regulary更新每当引导的新版本(4.1.0,4.1.3)来了,所有的事情都完美的工作,直到我有更新引导4.2.1从那里我遇到控制台错误时曾经我点击文件

未捕获的DOMException:无法在'Document'上执行'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

我遇到了这个问题，对这个报告问题的评论让我找到了解决方案。我正在从 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 并捕获异常，如下所示

代替

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