Javascript两个window.onlick函数冲突

我使用了两个下拉框和下面的脚本，除了在窗口外单击外，其他一切都可以工作，这只会在最后一个按钮上工作，我知道有一种方法可以分离窗口。onclick函数，但我不确定如何操作，我尝试了一些方法，但找不到关于这方面的更多信息

任何帮助都将不胜感激

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction20() {
    document.getElementById("myDropdown20").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event20) {
  if (!event.target.matches('.dropbtn20')) {

    var dropdowns20 = document.getElementsByClassName("dropdown-content20");
    var i;
    for (i = 0; i < dropdowns20.length; i++) {
      var openDropdown20 = dropdowns20[i];
      if (openDropdown20.classList.contains('show')) {
        openDropdown20.classList.remove('show');
      }
    }
  }
}
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction21() {
    document.getElementById("myDropdown21").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event21) {
  if (!event.target.matches('.dropbtn21')) {

    var dropdowns21 = document.getElementsByClassName("dropdown-content21");
    var i;
    for (i = 0; i < dropdowns21.length; i++) {
      var openDropdown21 = dropdowns21[i];
      if (openDropdown21.classList.contains('show')) {
        openDropdown21.classList.remove('show');
      }
    }
  }
}
</script>

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction20（）{
document.getElementById（“myDropdown20”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（event20）{
如果（！event.target.matches（'.dropbtn20'））{
var dropdowns20=document.getElementsByClassName（“dropdown-content20”）；
var i；
对于（i=0；i

---

当单击按钮和下拉列表外时，右侧的按钮将关闭，但左侧的按钮不会关闭

我想改变一下你的一次窗口点击法

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction20() {
    document.getElementById("myDropdown20").classList.toggle("show");
}

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction21() {
    document.getElementById("myDropdown21").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event20) {
  if (!event.target.matches('.dropbtn20')) {

    var dropdowns20 = document.getElementsByClassName("dropdown-content20");
    var i;
    for (i = 0; i < dropdowns20.length; i++) {
      var openDropdown20 = dropdowns20[i];
      if (openDropdown20.classList.contains('show')) {
        openDropdown20.classList.remove('show');
      }
    }
  } else if (!event.target.matches('.dropbtn21')) {

    var dropdowns21 = document.getElementsByClassName("dropdown-content21");
    var i;
    for (i = 0; i < dropdowns21.length; i++) {
      var openDropdown21 = dropdowns21[i];
      if (openDropdown21.classList.contains('show')) {
        openDropdown21.classList.remove('show');
      }
    }
  }
}
</script>

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction20（）{
document.getElementById（“myDropdown20”）.classList.toggle（“show”）；
}
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction21（）{
document.getElementById（“myDropdown21”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（event20）{
如果（！event.target.matches（'.dropbtn20'））{
var dropdowns20=document.getElementsByClassName（“dropdown-content20”）；
var i；
对于（i=0；i

以上评论聊天的结果。为清晰起见，在此处添加。在HTML中引入了onblur

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数myFunction2（）{
document.getElementById（“myDropdown2”）.classList.toggle（“show”）；
}

.dropbtn{
背景色：#85c445；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
宽度：170px；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
位置：相对位置；
显示：内联块；
z指数：6
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
字体大小：16px；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#f1f1}
.show{display:block；}
.dropbtn2{
背景色：#85c445；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
宽度：170px；
}
.dropbtn2:悬停，.dropbtn2:焦点{
背景色：#3e8e41；
}
.下拉列表2{
位置：相对位置；
显示：内联块；
z指数：6
}
.下拉列表2{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉列表内容2 a{
颜色：黑色；
字体大小：16px；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.DropDown2A:悬停{背景色：#f1f1}
.show{display:block；}

例子
例子

这不是模糊事件的候选对象吗？我看了一下，不认为这与我的问题有关，请看这个JSFiddle，当点击按钮外的下拉菜单时，右边的将关闭，但左边的不会。。似乎只有当你点击实际的按钮本身，而不是在按钮之外时，功能才正常对不起，我不确定我是否保存了它。它在Chrome中为我工作。当我点击按钮时打开，当我点击其他任何地方时关闭。当我将其更改为此时，所有下拉列表都不会因点击窗口/按钮外而消失。只有一个问题，现在下拉列表中的链接不可点击，只需再次隐藏下拉列表而不跟随链接