觸發一次后關閉事件監聽器

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刪除事件偵聽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

Answer 2

一次調用后關閉偵聽器的 javascript 版本是這樣的：

canvas.addEventListener("mousedown",callback,{
        // This will invoke the event once and de-register it afterward
        once: true
});

Answer 3

最簡單的解決方案，如果你使用jQuery -用.one()代替.on()這等於觸發.off()在http://api.jquery.com/one/

Answer 4

如果您使用的是 jQuery，不妨使用Off()

.off()方法刪除了通過.on()附加的事件處理程序。 這是文檔： http : //api.jquery.com/off/