js完成点击任何位置都关闭下拉菜单

Posted 2023-04-28

我的下拉菜单是ul li 写的 我想问一下 应该怎么去实现这个功能目前点击按钮本身完成隐藏现实的功能已完成 就是想优化一下成点击屏幕任何位置都将其隐藏

参考技术A js添加：
<script>
document.onclick=function(e)
var e=e||window.event;
if(e.target.id!="cyearList")
document.getElementById("cyearList").classList.remove("disblock");


</script>本回答被提问者和网友采纳 参考技术B document.querySelector("#cyearList").onclick = (e) =>
window.event ? window.event.cancelBubble = true : e.stopPropagation();

document.querySelector("body").onclick = () =>
document.querySelector("#cyearList").style.display = "none";

原生的话逻辑是这样的，我想vue的话，你应该也知道了。
请采纳

单击外部编辑器时，Angular js Summernote 下拉菜单未关闭

【中文标题】单击外部编辑器时，Angular js Summernote 下拉菜单未关闭

【英文标题】：Angular js Summernote dropdown not closing when clicked outside editor

【发布时间】：2018-09-21 18:40:19

【问题描述】：

我正在使用带有 angularJS 的 Summernote。问题是当我在summernote 编辑器中打开下拉菜单并且没有选择任何选项并单击页面中的其他位置时，我仍然可以看到下拉菜单。我希望在编辑器外部单击后立即隐藏下拉菜单。我如何做到这一点？

我的html代码是。

<summernote id="summernoteId" config="options" ng-model="x.responseTitle" placeholder="Enter title"/>

【参考方案1】：

试试这个，使用指令关闭 Summernote 下拉菜单。

angular.module('clickOutside', [])

.directive('clickOutside', [ '$parse', '$timeout', function($parse, $timeout) 
        return 
          link: function (scope, element, attrs) 
            function handler(event) 
              if(!$(event.target).closest(element).length) 
                scope.$apply(function () 
                  $parse(attrs.clickOutside)(scope);
                );
              
            

            $timeout(function () 
              // Timeout is to prevent the click handler from immediately
              // firing upon opening the Summernote.
              $(document).on("click", handler);
            );
            scope.$on("$destroy", function () 
              $(document).off("click", handler);
            );
          
        
    ]); 

在 DOM 中包含 clickOutside 作为指令：

<summernote clickOutside id="summernoteId" config="options" ng-model="x.responseTitle" placeholder="Enter title"/>  

【参考方案2】：

感谢 Anil 的回复，但不知何故它不起作用。我做了一个非常糟糕的黑客来隐藏如下。欢迎提出任何建议。

$scope.formClicked = function()
     
        var list = document.getElementsByClassName("note-hint-item");
        if(list.length > 0)
          $(".note-hint-popover").attr("style", "display:none");