WedX - журнал о программировании и компьютерных науках

отключить прослушиватель событий после срабатывания один раз

У меня есть скрипт, который вызывает всплывающее окно, предлагающее бесплатную загрузку. Он срабатывает, когда мышь пользователя покидает страницу (очевидно, не для мобильных устройств — для этого у меня уже есть рабочее решение). В моем скрипте я установил куки для деактивации скрипта на 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="https://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. Ваша помощь, как всегда, приветствуется.

javascript jquery
28.10.2014

  • Объявления функций внутри условных выражений не допускаются и дают разные результаты в разных браузерах. 28.10.2014
  • Re: showhide(), ты знаешь, что есть $(element).toggle()? 28.10.2014
  • просто используйте метод .off после того, как он был показан пользователю, чтобы отменить прослушиватель событий? 28.10.2014
  • @Bjorn - Да, я действительно планировал использовать .toggle(), но у меня это не сработало в этом коде. 29.10.2014

Ответы:


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

28.10.2014
  • я согласен, что это правильный путь, просто имейте в виду, что вам нужно как-то назвать функцию. это не сработает, если вы объявите анонимный обработчик, например: element.addEventListener('click', function(){}) 28.10.2014
  • Привет, Ориол, как у нас может быть обратный вызов обработчика в определении самого обработчика ()? Я не понимаю, почему это возможно, потому что мне это кажется круговым! 21.04.2020

    • 2

    Версия javascript для отключения прослушивателя после одного вызова:

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

    3

    самое простое решение, если вы используете jQuery — используйте .one() вместо .on(), это эквивалентно запуску .off() на https://api.jquery.com/one/

    15.03.2016

    4

    Если вы используете jQuery, можете просто использовать Off()

    Метод .off() удаляет обработчики событий, присоединенные с помощью .on(). Вот документация: https://api.jquery.com/off/

    28.10.2014
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]