拦截提交事件

Question

我想构建一个简单的Google扩展程序，如果其中包含被列入黑名单的单词，它将阻止用户提交该推文。这要求我可以拦截点击“ Tweet”上的提交。

检查Twitter页面后，我目前在内容脚本中使用以下代码：

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

当我单击“ Tweet”时，我将获得控制台输出，但该Tweet仍被提交。有趣的是，当我仅使用$('button')时，它可以与许多按钮一起使用。例如，我不能再删除一条推文。因此，这种工作方式只是为了不提交新的推文，我无法确定为什么会这样。这是Twitter HTML页面的摘录：

如何拦截和停止提交推文。

更新：我已经尝试按照下面的建议拦截表单提交。由于表单没有ID，因此我使用了类选择器：

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

但是它不起作用。为了进行一次简单的测试，我尝试了$('.tweet-form').css(...)，它成功地更改了一些样式更改。但是，拦截提交无效。我什至看不到控制台输出。也许是因为表单标记之间没有type="submit"。

Answer 1

您必须拦截<Form /> submit事件，以防止发布新元素。

您可以直接将其添加到<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
    }
});

Answer 2

拦截按钮单击事件适用于stopImmediatePropagation()而不是stopPropagation()。问题在于此按钮已经附加了单击处理程序，并且stopPropagation()仅影响父处理程序。并且添加新的click事件处理程序不会覆盖现有的事件处理程序。 stopImmediatePropagation()阻止调用同一事件的其他侦听器。

因此，有效的解决方案如下：

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