Как бы я отменил конкретное событие в JavaScript? - PullRequest
Новая
       48

Как бы я отменил конкретное событие в JavaScript?

1 голос
/ 07 апреля 2019

Я добавил 2 разных события, каждое из которых называется touchstart и mousedown в методе on, например:

this.$el.on('touchstart mousedown', (e) => { this.start(e); })

Моя главная цель - отменить mousedown событие only , которое принадлежит методу on в конце вызванной функции end.

Если я запускаю событие touchstart, всегда запускаются два разных события. Посмотри эту картинку:

enter image description here

Эта проблема вызывает блокировку нежелательных событий в Firefox. А также код запускается дважды, что не нужно. Я хочу перенаправить сайт, когда я click или touch элемент, предотвратить, когда я drag или swipe.

Я искал, как предотвратить определенное событие в Google, но не нашел никакой информации, поэтому сам попробовал несколько способов. Тем не менее, все случаи не сработали.

  1. Добавить return false; строка

    • К сожалению, return false останавливает все оставшиеся события после завершения функции end. Моя цель - отменить только mousedown, а не весь events. Поэтому я не могу просто вставить строку в функцию.

  2. Добавить mousedown событие в метод off

    • Это тоже не работает. events, принадлежащий методу off, по-прежнему остается выключенным. Поэтому, если я попытаюсь перетащить после того, как проведу пальцем по элементу, ничего не произойдет, потому что событие mousedown теперь отключено.

  3. Добавить preventDefault() или stopPropagation()

    • Те, кто не может использовать в качестве одной и той же причины в случае 1.

  4. Использование RegExp для разделения и создания новой функции для Firefox

    • Проблема заключалась в запуске нежелательного события, а не браузера.

Есть ли способы отменить определенный event в этом коде? 

class Evt {
  constructor($el) {
    this.$el = $el;
  }
  start(e) {
    console.log('start Function');
    this.$el.off('click');
    this.$el.on({
      ['touchmove mousemove']: (e) => this.eventmove(e),
      ['touchend mouseup']: (e) => this.end(e)
    });
  }
  eventmove(e) {
    e.preventDefault();
    console.log('move function');
    this.$el.on('click', (e) => {e.preventDefault();});
    return false;
  }
  end(e) {
    console.log('end function');
    this.$el.on('click');
    this.$el.off('touchmove touchend mousemove mouseup');
  }
  apply() {
    this.$el.on('touchstart mousedown', (e) => {
      this.start(e);
    })
  }
}
var thatEvt = new Evt($('#link'));
thatEvt.apply();
      a {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        background-color: brown;
        font-family: Helvetica;
      }
    <a id="link" href="https://google.co.uk">
      Click/Touch and Drag/Swipe
    </a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1 Ответ

1 голос
/ 07 апреля 2019

Насколько я понимаю, ваше намерение состоит в том, чтобы ссылка не перенаправлялась при перемещении мыши в пределах щелчка.

Во-первых, я предполагаю, что вы не хотите, чтобы ссылка была перетаскиваемой, поэтому добавьте draggable="false" тег.Это предотвратит события, которые могут повлиять на код за пределами того, что вы отправили (например, перенаправление / удаление ссылок). 

<a id="link" href="https://google.co.uk" draggable="false">
  Click/Touch and Drag/Swipe
</a>

Если это не решит вашу проблему, я собрал этот код ниже, это может быть большесложный, но он должен быть немного более устойчивым. 

class Evt {
  constructor($el) {
    this.$el = $el;
    this.active = false;
    this.preventRedirect = false;
  }
  start(e) {
    console.log('start Function');
    this.active = true;
    this.preventRedirect = false;
  }
  eventmove(e) {
    if (this.active) {
      console.log('move function');
      this.preventRedirect = true;
    }
  }
  end(e) {
    if (this.active) {
      console.log('end function');
      this.active = false;
    }
  }
  apply() {
    this.$el.on({
      ['touchstart mousedown']: (e) => this.start(e),
      ['click']: (e) => { //preventing onclick only if preventRedirect is set
        if (this.preventRedirect) {
          e.preventDefault();
          return false;
        }
      }
    });
    $("html").on({ //so that the mouse can move outside the element and still work.
      ['touchmove mousemove']: (e) => this.eventmove(e),
      ['touchend mouseup']: (e) => this.end(e)
    });
  }
}
var thatEvt = new Evt($('#link'));
thatEvt.apply();
...