棘轮 - 收听来自 JS 的弹出框关闭答案

【问题标题】：ratchet - listen to popover closing from JS棘轮 - 收听来自 JS 的弹出框关闭
【发布时间】：2014-08-22 01:38:58
【问题描述】：

我有一个棘轮弹出框，我从 here 拿来的：

<div id="popover" class="popover">
  <header class="bar bar-nav">
    <h1 class="title">Popover title</h1>
  </header>
  <ul class="table-view">
    <li class="table-view-cell">Item1</li>
    <li class="table-view-cell">Item2</li>
  </ul>
</div>

<header class="bar bar-nav">
  <a href="#popover">
    <h1 class="title">
      Tap title
      <span class="icon icon-caret"></span>
    </h1>
  </a>
</header>

我想找到一种方法来收听从 JS 关闭的弹出框（也使用 jQuery）

这是弹窗的棘轮js代码：

!(function () {
  'use strict';

  var popover;

  var findPopovers = function (target) {
    var i;
    var popovers = document.querySelectorAll('a');

    for (; target && target !== document; target = target.parentNode) {
      for (i = popovers.length; i--;) {
        if (popovers[i] === target) {
          return target;
        }
      }
    }
  };

  var onPopoverHidden = function () {
    popover.style.display = 'none';
    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
  };

  var backdrop = (function () {
    var element = document.createElement('div');

    element.classList.add('backdrop');

    element.addEventListener('touchend', function () {
      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
      popover.classList.remove('visible');
      popover.parentNode.removeChild(backdrop);
    });

    return element;
  }());

  var getPopover = function (e) {
    var anchor = findPopovers(e.target);

    if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
      return;
    }

    try {
      popover = document.querySelector(anchor.hash);
    }
    catch (error) {
      popover = null;
    }

    if (popover === null) {
      return;
    }

    if (!popover || !popover.classList.contains('popover')) {
      return;
    }

    return popover;
  };

  var showHidePopover = function (e) {
    var popover = getPopover(e);

    if (!popover) {
      return;
    }

    popover.style.display = 'block';
    popover.offsetHeight;
    popover.classList.add('visible');

    popover.parentNode.appendChild(backdrop);
  };

  window.addEventListener('touchend', showHidePopover);

}());

我该怎么做？

谢谢

【问题讨论】：

标签： javascript ratchet-2

【解决方案1】：

触发事件是documented here。如果您想将事件配置为冒泡，请查看它。基本上，在弹出窗口上触发一个事件，如下所示：

var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "hide" }});
// Dispatch the event.
popover.dispatchEvent(event);

在 popovers.js 中注入一些事件触发器。具体来说onPopoverHidden和showHidePopover方法

var showHidePopover = function (e) {
    var popover = getPopover(e);

    if (!popover) {
      return;
    }

    popover.style.display = 'block';
    popover.offsetHeight;
    popover.classList.add('visible');

    popover.parentNode.appendChild(backdrop);

    //create event
    var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "show" }});
    // Dispatch the event.
    popover.dispatchEvent(event);


  };

  var onPopoverHidden = function () {
    popover.style.display = 'none';
    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
    //create event
    var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "hide" }});
    // Dispatch the event.
    popover.dispatchEvent(event);
  };

通过将事件侦听器附加到触发事件的弹出框来监听弹出框

// Listen for the event.
document.getElementById("menu-popover")
        .addEventListener('pop', function (e) {
            console.log(e.detail.id + " " + e.detail.type);
          }, false);

【讨论】：