Javascript 单击事件仅应用于容器+；让QuerySelector在IE11中正常工作

代码将全屏打开一个div/表

我需要click事件仅应用于包含的div，以便全屏效果仅应用于具有按钮的div（单击发生的位置）

基本上，点击第二个表中的“查看全屏表”按钮应该和第一个表上的按钮一样工作，只修改JS脚本而不是HTML。第二个按钮应打开第二个表

如何以这种方式修改单击事件

var customFullscreen = document.getElementById("fullscreen-table")
        libraryFullscreen = document.getElementById("expand-fullscreen");

    if (customFullscreen && libraryFullscreen) {
        libraryFullscreen.addEventListener("click", function (evt) {
            if (customFullscreen.requestFullscreen) {
                customFullscreen.requestFullscreen();
            }
            else if (customFullscreen.msRequestFullscreen) {
                customFullscreen.msRequestFullscreen();
            }
            else if (customFullscreen.mozRequestFullScreen) {
                customFullscreen.mozRequestFullScreen();
            }
            else if (customFullscreen.webkitRequestFullScreen) {
                customFullscreen.webkitRequestFullScreen();
            }
        }, false);
    }

---

为赏金编辑：我从@dacre denny那里得到了一个有效的解决方案，但它在IE11中不起作用。我需要以某种方式使它在IE11中也能工作。

您需要遍历层次结构并找到最接近的div（如果您能够使用jQuery，请参阅jQuery.closest）

---

不依赖JQuery的解决方案是如下修改HTML和JavaScript（请注意，尽管此脚本有点臃肿，但应该与IE11兼容）：

有关完整的工作版本，请参阅下面的代码片段-希望有帮助

（函数（）{
var cancelButtons=document.queryselectoral（“.cancel fullscreen”）；
对于（变量i=0；i
.tableHolder{
背景：白色；
}

查看全屏表格
取消全屏
第一桌
标题
标题
标题
标题
标题
标题
标题
正文
正文
正文
正文
正文
正文
正文








查看全屏表格
取消全屏
第一桌
标题2
标题2
标题2
标题2
标题2
标题2
标题2
文本2
文本2
文本2
文本2
文本2
文本2
文本2
Waw！就是这样！谢谢你。现在我看到了，它是如此简单，如此美丽。@missaprime如果你觉得这个答案很有帮助，请点击灰色的勾选标记接受。你知道为什么你的解决方案不适用于IE11吗？你对如何使它适用于IE11有什么建议吗？@missaprime queryselectoral（）在IE11中受支持。不是这些的是for of循环中的
const
，因此您可能必须将它们替换为
var
s.HTML
tagName
s都是大写的。不仅仅是jQuery。
function eventHandler(e) {
  //normally, 'this' points to the element that was clicked
  //but if not, you can use e.target
  var parent = this;
  while (parent.tagName != 'div') {
    parent = parent.parentNode;
  }
  ...
}

  var cancelButtons = document.querySelectorAll(".cancel-fullscreen");

  for (var i = 0; i < cancelButtons.length; i++) {

    var cancelButton = cancelButtons[i];

    cancelButton.addEventListener("click", function() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }, false);
  }

  var tableHolders = document.querySelectorAll(".tableHolder");

  for (var j = 0; j < tableHolders.length; j++) {

    var tableHolder = tableHolders[j];
    var fullScreenButton = tableHolder.querySelector(".view-fullscreen");

    fullScreenButton.addEventListener("click", function() {
      if (tableHolder.requestFullscreen) {
        tableHolder.requestFullscreen();
      } else if (tableHolder.msRequestFullscreen) {
        tableHolder.msRequestFullscreen();
      } else if (tableHolder.mozRequestFullScreen) {
        tableHolder.mozRequestFullScreen();
      } else if (tableHolder.webkitRequestFullScreen) {
        tableHolder.webkitRequestFullScreen();
      }
    }, false);
  }

<button id="cancel-fullscreen" class="cancel-fullscreen">Cancel fullscreen</button>