Перехватить событие

Question

Я хочу создать простые расширения Google, которые не позволят пользователям отправлять твит, если он содержит слово из черного списка. Это требует, чтобы я мог перехватить клик на "Tweet", который бы его отправил.

После проверки страницы в Твиттере в настоящее время я использую следующий код в скрипте содержимого:

$('button.tweet-action').click(function(e) {
  console.log(e);
  e.preventDefault();
  e.stopPropagation();
  return false;
});

Когда я нажимаю "Tweet", я получаю вывод на консоль, но твит все еще отправляется. Интересно, что когда я использую только $('button'), он работает со многими кнопками. Например, я больше не могу удалить твит. Так что это работает не только для отправки новых твитов, и я не могу сказать, почему это так. Вот фрагмент HTML-страницы Twitter:

Как я могу перехватить и остановить отправку твитов.

Обновление: я попытался перехватить отправку формы, как показано ниже. Поскольку форма не имеет идентификатора, я использовал селектор класса:

$('.tweet-form').submit(function(e) {
  console.log(e);
  e.preventDefault();
  e.stopPropagation();
  return false;
});

Но это не работает. Для тривиального теста я попытался $('.tweet-form').css(...), который успешно изменил некоторые изменения стиля. Однако перехват отправки не работает; Я даже не вижу вывод консоли. Может быть, это потому, что между тегами формы нет type="submit".

Answer 1

Перехват события нажатия кнопки работает с stopImmediatePropagation() вместо stopPropagation(). Проблема в том, что к этой кнопке уже прикреплен обработчик щелчка, и stopPropagation() влияет только на родительские обработчики. И добавление новых обработчиков событий щелчка не перезаписывает существующие. stopImmediatePropagation() предотвращает вызов других слушателей того же события.

Таким образом, рабочие решения выглядят так:

$('button.tweet-action').click(function(e) {
  console.log(e);
  e.preventDefault();
  e.stopImmediatePropagation();
  return false;
});

Answer 2

Вам нужно перехватить <Form /> событие отправки , чтобы предотвратить публикацию нового элемента.

Вы можете добавить его прямо в элемент <Form />:

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>

Или вы можете использовать селектор:

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});