Bootstrap 5 data-bs-toggle“折叠”防止通过单击 div 中的按钮进行操作

Question

我有一个带有 data-bs-toggle 属性的 < div >。在该 div 中我有按钮

单击面板时面板会折叠，但我不希望单击按钮时触发折叠事件。我怎样才能控制这种行为。看起来 bs 事件发生在按钮单击事件之前。

在我尝试添加的按钮的单击事件中：

e.preventDefault();
e.stopPropagation();

这似乎没有达到我需要的效果。

Answer 1

我通过在文档对象的“click”事件处理程序中调用 stopImmediatePropagation() 方法找到了解决此问题的方法。

这对我来说适用于 Bootstrap 5.3.3

<html lang="en" data-bs-theme="auto">
  <head>
    <title>Bootstrap - ignore colapse</title>
    <link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  
    <div id="header" data-bs-toggle="collapse" data-bs-target="#collapse-content" role="button" aria-expanded="false" aria-controls="collapse-content">
    <span>Header text - click here to show/hide content</span>
    <button id="collapse-ignore-button" class="btn btn-primary" type="button">
      Button
    </button>
    </div>
    <div class="collapse" id="collapse-content">
      <div class="card card-body">
        Content for show/hide on collapse
      </div>
    </div>

    <script>
      // Note! This code must be called BEFORE the bootstrap.bundle.min.js script included
      document.addEventListener(
        'click', 
        function(e) {
          if (e.target.id === "collapse-ignore-button") {
            // Do something on button click (change button color for example)
            e.target.classList.toggle('btn-primary');
            e.target.classList.toggle('btn-success');
            
            // Prevent all other listeners from being called 
            e.stopImmediatePropagation();
          }
        },
        true // Add listener to capturing phase
      );
    </script>
    
    <script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" ></script>
    
  </body>
</html>

Bootstrap 5 data-bs-toggle“折叠”防止通过单击 div 中的按钮进行操作

问题描述投票：0回答：1

1个回答

最新问题

Bootstrap 5 data-bs-toggle“折叠”防止通过单击 div 中的按钮进行操作

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1