Javascript 在没有jQuery的情况下侦听页面上的任意位置的单击
我有一个下拉菜单,可以在点击时切换,我已经完全摆脱了jQuery,所以我可以使用AngularJS切换菜单。问题是,如果下拉部分可见,则必须再次单击按钮以隐藏它。因此,切换菜单的唯一方法是现在就使用按钮,我希望用户能够通过单击页面上非菜单的某个位置来关闭菜单 下面是我的代码:Javascript 在没有jQuery的情况下侦听页面上的任意位置的单击,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我有一个下拉菜单,可以在点击时切换,我已经完全摆脱了jQuery,所以我可以使用AngularJS切换菜单。问题是,如果下拉部分可见,则必须再次单击按钮以隐藏它。因此,切换菜单的唯一方法是现在就使用按钮,我希望用户能够通过单击页面上非菜单的某个位置来关闭菜单 下面是我的代码: <button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMe
<button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMenu">
{{ getNavTitle() | translate }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-class="{ show: showMenu === true }">
<li>
<a id="hottest" ng-click="nav.replaceTo('/one')" ng-class="{active: subnav === 'top'}"><big>{{ 'subnav-one' | translate }}</big></a>
</li>
<li>
<a id="latest" ng-click="nav.replaceTo('/two')" ng-class="{active: subnav === 'latest'}"><big>{{ 'subnav-two' | translate }}</big></a>
</li>
<li>
<a id="friends" ng-click="nav.replaceTo('/three')" ng-class="{active: subnav === 'fans'}"><big>{{ 'subnav-three' | translate }}</big></a>
</li>
</ul>
所以这是可行的。使用jQuery,我只需在页面上的某个地方听到一个不是三个下拉链接和切换按钮之一的点击,然后关闭菜单。但是对于AngularJS,我不确定如何去做。我猜你在使用引导。您可以使用angular bootstrap或bootstrap.js本身。我认为自动关闭功能应该已经在那里实现了
如果您想自己实现它,请在正文中添加一个click事件处理程序,该处理程序将关闭菜单,并使用“once”,这样该处理程序将执行一次,然后从事件侦听器中删除。?。尝试但是它会产生一些不想要的结果。什么样的效果?@Ba5t14n对不起,我不知道你的意思?按钮只是一个按钮,它不是我的整个页面…?如果你不想使用jquery,为什么要标记问题jquery?好吧,我想尝试在这个小示例中只使用Angular,所以我不依赖任何外部库。Angular依赖于jquery或它自己的jquery lite。使用它的角度是angular.element“body”,它返回一个jquery对象。你愿意举个例子吗?我写这篇文章的原因是,我不知道如何将这个点击事件处理程序添加到angular body,正如你所提到的。检查angular bootstrap的实现:我已经看过了这些文档,我对AngularJS没有太多的经验,因此我请求一些帮助。
$scope.showMenu = false;