javascript - 触发一次后关闭事件监听器

Question

我有一个脚本可以触发一个提供免费下载的弹出框。当用户的鼠标离开页面时它会触发(显然不适用于移动设备 - 我已经有一个可行的解决方案)。在我的脚本中，我设置了一个 cookie 来停用脚本 30 分钟，并且该部分有效；如果我刷新页面，弹出窗口不会再次显示。

问题是，如果有人关闭弹出框，并且没有刷新页面(或导航到网站上的另一个页面)，则每次鼠标移出页面时都会出现弹出框。

我正在使用一个设置事件的函数，但我不能让它只触发一次。(我正在开发的 WordPress 网站使用的是 jquery ver=1.10.2。)

我的 JavaScript:

if (document.cookie.indexOf('somecookiename') != -1) {
  function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(evt, fn, false);
    } else if (obj.attachEvent) {
      obj.attachEvent("on" + evt, fn);
    }
  }
};
jQuery(document).ready(function($) {
  if (document.cookie.indexOf('somecookiename') == -1) {
    //var thirtyminutes = 1000*60*30;
    var thirtyminutes = 1000 * 60;
    var expires = new Date((new Date()).valueOf() + thirtyminutes);
    document.cookie = "somecookiename;expires=" + expires.toUTCString();

    addEvent(document, "mouseout", function(e) {
      e = e ? e : window.event;
      var from = e.relatedTarget || e.toElement;
      if (!from || from.nodeName == "HTML") {
        document.getElementById("preview-download").style.display = "block";
        document.getElementById("back-shader").style.display = "block";
      }
    });
  }
});

function showhide(id) {
  if (document.getElementById) {
    obj = document.getElementById(id);
    if (obj.style.display == "none") {
      obj.style.display = "";
    } else {
      obj.style.display = "none";
    }
  }
}

HTML:

<div id="back-shader" class="popover2">
  <div id="preview-download" class="popover2">
    <h4>BEFORE YOU GO:</h4>
    <h5>Download A Free Preview....</h5>
    <a href="http://website.com/document.pdf" id="preview-pdf">Download Now</a>
    <a href="#" id="closer" onclick="showhide('back-shader'); return(false);"></a>
  </div>
</div>

CSS:

#back-shader,
#preview-download {
  display: none;
}

这可能很简单，但我不是 JavaScript 专家。我们一如既往地感谢您的帮助。

Answer 1

最简单的方法是使用 removeEventListener 删除事件监听器:

document.addEventListener("mouseout", function handler(e) {
    e.currentTarget.removeEventListener(e.type, handler);
    /* whatever */
});

document.addEventListener("click", function handler(e) {
  e.currentTarget.removeEventListener(e.type, handler);
  alert('Only once');
});

Click somewhere