单击事件仅适用于容器 + 使 querySelectorAll 在 IE11 中工作

Question

该代码以全屏方式打开一个 div/table。

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

基本上，通过只修改 JS 脚本而不是 HTML，单击第二个表中的“查看全屏表”按钮应该与第一个表上方的按钮相同。第二个按钮应该打开第二个表。

https://codepen.io/MistaPrime/pen/jONeKZZ

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

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 中工作。

Answer 1

一个不依赖于 JQuery 的解决方案是修改你的 HTML 和 JavaScript，如下（注意，虽然这个脚本有点臃肿，但它应该是 IE11 兼容的）：&nbsp; var cancelButtons = document.querySelectorAll(".cancel-fullscreen");&nbsp; for (var i = 0; i < cancelButtons.length; i++) {&nbsp; &nbsp; var cancelButton = cancelButtons[i];&nbsp; &nbsp; cancelButton.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; if (document.exitFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.exitFullscreen();&nbsp; &nbsp; &nbsp; } else if (document.msExitFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.msExitFullscreen();&nbsp; &nbsp; &nbsp; } else if (document.mozCancelFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.mozCancelFullScreen();&nbsp; &nbsp; &nbsp; } else if (document.webkitCancelFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.webkitCancelFullScreen();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, false);&nbsp; }&nbsp; var tableHolders = document.querySelectorAll(".tableHolder");&nbsp; for (var j = 0; j < tableHolders.length; j++) {&nbsp; &nbsp; var tableHolder = tableHolders[j];&nbsp; &nbsp; var fullScreenButton = tableHolder.querySelector(".view-fullscreen");&nbsp; &nbsp; fullScreenButton.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; if (tableHolder.requestFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.requestFullscreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.msRequestFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.msRequestFullscreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.mozRequestFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.mozRequestFullScreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.webkitRequestFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.webkitRequestFullScreen();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, false);&nbsp; }此脚本要求cancel-fullscreen以这种方式将类应用于每个“取消全屏”按钮：<button id="cancel-fullscreen" class="cancel-fullscreen">Cancel fullscreen</button>有关完整的工作版本，请参阅下面的代码片段 - 希望有所帮助！(function() {&nbsp; var cancelButtons = document.querySelectorAll(".cancel-fullscreen");&nbsp; for (var i = 0; i < cancelButtons.length; i++) {&nbsp; &nbsp; var cancelButton = cancelButtons[i];&nbsp; &nbsp; cancelButton.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; if (document.exitFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.exitFullscreen();&nbsp; &nbsp; &nbsp; } else if (document.msExitFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.msExitFullscreen();&nbsp; &nbsp; &nbsp; } else if (document.mozCancelFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.mozCancelFullScreen();&nbsp; &nbsp; &nbsp; } else if (document.webkitCancelFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; document.webkitCancelFullScreen();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, false);&nbsp; }&nbsp; var tableHolders = document.querySelectorAll(".tableHolder");&nbsp; for (var j = 0; j < tableHolders.length; j++) {&nbsp; &nbsp; var tableHolder = tableHolders[j];&nbsp; &nbsp; var fullScreenButton = tableHolder.querySelector(".view-fullscreen");&nbsp; &nbsp; fullScreenButton.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; if (tableHolder.requestFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.requestFullscreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.msRequestFullscreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.msRequestFullscreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.mozRequestFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.mozRequestFullScreen();&nbsp; &nbsp; &nbsp; } else if (tableHolder.webkitRequestFullScreen) {&nbsp; &nbsp; &nbsp; &nbsp; tableHolder.webkitRequestFullScreen();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, false);&nbsp; }})();.tableHolder {&nbsp; background: white;}<div class="tableHolder" id="fullscreen-table">&nbsp; <button id="expand-fullscreen" class="view-fullscreen">View fullscreen table</button>&nbsp; <button id="cancel-fullscreen" class="cancel-fullscreen">Cancel fullscreen</button>&nbsp; <table width="100%" border="1" cellspacing="0" cellpadding="3">&nbsp; &nbsp; <caption>FIRST TABLE</caption>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; &nbsp; <th>HEADER</th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; &nbsp; <td>TEXT</td>&nbsp; &nbsp; </tr>&nbsp; </table></div><br/><br/><br/><br/><br/><div class="tableHolder" id="fullscreen-table">&nbsp; <button id="expand-fullscreen" class="view-fullscreen">View fullscreen table</button>&nbsp; <button id="cancel-fullscreen" class="cancel-fullscreen">Cancel fullscreen</button>&nbsp; <table width="100%" border="1" cellspacing="0" cellpadding="3">&nbsp; &nbsp; <caption>FIRST TABLE</caption>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; &nbsp; <th>HEADER 2</th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; &nbsp; <td>TEXT 2</td>&nbsp; &nbsp; </tr>&nbsp; </table></div>

Answer 2

您需要向上遍历层次结构并找到最近的 div（如果您能够使用 jQuery，请参阅 jQuery.closest）。function eventHandler(e) {&nbsp; //normally, 'this' points to the element that was clicked&nbsp; //but if not, you can use e.target&nbsp; var parent = this;&nbsp; while (parent.tagName != 'div') {&nbsp; &nbsp; parent = parent.parentNode;&nbsp; }&nbsp; ...}