外部点击在angularjs中不起作用

Posted 2023-05-08

【中文标题】外部点击在angularjs中不起作用

【英文标题】：outside click is not working in angularjs

【发布时间】：2019-11-25 22:02:27

【问题描述】：

我有一个按钮。如果我单击该按钮，则会在导航栏中打开一个弹出窗口。我正在为此使用 ui-bootstrap。

如果我在弹出窗口之外单击，则不会关闭。

我编写了 window.onclick 函数来实现这一点。这是工作。

但我的问题是，如果我单击按钮弹出窗口将打开。如果我在下拉列表中选择任何值，则会在此之上再打开一个弹出窗口。

所以如果我在第二个下拉菜单中选择任何 dropdwon 值，第一个下拉菜单会自动关闭。

我的需要是，当我单击按钮下拉菜单时应该打开。如果我在下拉菜单之外单击关闭。

如果我从下拉列表中选择任何值，下拉列表应该是稳定的。它不应该熄灭。只有当我在那个时间之外点击它才会消失。

<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">&nbsp&nbspFilter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
  <div class="dropdown-menu">
    <div class="dropdown-item" ng-repeat="filter in filters">
      <div>filter.filterObject</div>
    </div>
  </div>
</li>

window.onclick = function() 
   $(".dropdown-menu").hide();

如果我点击按钮，下拉菜单不应该消失。

【问题讨论】：

你使用哪个组件弹出？？

您的代码 sn-p 不起作用。你能举个例子吗？

检查此链接是否有帮助 - jasonwatmore.com/post/2018/05/25/…

【参考方案1】：

这是你可以做的，这又不是理想的方法，因为我们提供的数据很少，我只能想到这种修复:)

window.addEventListener("click", function(event) 
    if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) 
         $(".dropdown-menu").hide();
    
);

编辑 1

只需添加一个父 div 并为您不想关闭的下拉父级保留一个唯一类 假设类名是dropdown-select

然后像这样编辑条件

if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) 

【讨论】：

非常感谢肯尼。如果我在第二个下拉列表中选择任何值，第一个下拉列表将自动关闭。这是否可以保留第一个图表。它应该只在点击外部时关闭。不在下拉选择中

编辑了答案。如果这能解决您的问题，请告诉我

if (!$(event.target).hasClass('lui-popover-container') &&!$(event.target).parents().hasClass('lui-popover-container' ))

这是我的第二个下拉菜单，如果我使用它，而在“下拉菜单”外部单击不会隐藏。

【参考方案2】：

你应该为 jquery 库添加一个扩展，然后添加这个脚本，因为你使用的是 javascript

    <script>
        $( document ).ready(function() 
            $(".dropdown-menu").hide();
        );
    </script>