单击事件仅适用于容器 + 使 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 兼容的）：

  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);

  }

此脚本要求cancel-fullscreen以这种方式将类应用于每个“取消全屏”按钮：

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

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

(function() {

  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);

  }

})();

.tableHolder {

  background: white;

}

<div class="tableHolder" id="fullscreen-table">

  <button id="expand-fullscreen" class="view-fullscreen">View fullscreen table</button>

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

  <table width="100%" border="1" cellspacing="0" cellpadding="3">

    <caption>FIRST TABLE</caption>

    <tr>

      <th>HEADER</th>

      <th>HEADER</th>

      <th>HEADER</th>

      <th>HEADER</th>

      <th>HEADER</th>

      <th>HEADER</th>

      <th>HEADER</th>

    </tr>

    <tr>

      <td>TEXT</td>

      <td>TEXT</td>

      <td>TEXT</td>

      <td>TEXT</td>

      <td>TEXT</td>

      <td>TEXT</td>

      <td>TEXT</td>

    </tr>

  </table>

</div>

<br/><br/><br/><br/><br/>

<div class="tableHolder" id="fullscreen-table">

  <button id="expand-fullscreen" class="view-fullscreen">View fullscreen table</button>

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

  <table width="100%" border="1" cellspacing="0" cellpadding="3">

    <caption>FIRST TABLE</caption>

    <tr>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

      <th>HEADER 2</th>

    </tr>

    <tr>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

      <td>TEXT 2</td>

    </tr>

  </table>

</div>

Answer 2

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

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;

  }

  ...

}