Question

我的页面上有两个JS代码：

使用此脚本的小下拉菜单：

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

和一个使用下一个脚本的模式框（显示在首页上的弹出窗口）：

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

问题：

除了一件事之外，一切工作都很完美：在下拉菜单中使用脚本的第一个代码中，有一些代码用于在单击外部时关闭菜单。但是，当我在上面提到的一个页面上使用这两个脚本时，它不起作用。（要明确的是：当我在另一个没有第二个脚本的页面上使用Dropdown JS时，一切都很完美）。

你能帮忙找出导致问题的原因吗？

Answer 1

在第二个代码块中，您将覆盖onclick的{{1}}处理程序。

您需要修改处理程序以处理这两个函数，而不是覆盖它。

例如：

window

Answer 2

使用let predicate = NSPredicate(format: "ANY members.id == %@", userA.id) eventsWithUserA = realm.objects(Event).filter(predicate)代替document.body.addEventListener('click')。像这样：

window.onclick

和

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
document.body.addEventListener('click', function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
});

Answer 3

第二个脚本为window.onclick分配一个新的回调，它会覆盖第一个脚本中的回调。

您可以使用addEventListener添加第二个侦听器。

Answer 4

这两个脚本都附加了一个函数到window.onclick。当你同时使用两者时，最后一次使用它。请改为使用addEventListener：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

无法找出为什么javascript代码不起作用

4 个答案: