Javascript 截获提交事件

我想建立一个简单的谷歌扩展，如果推文中包含黑名单单词，它将阻止用户提交推文。这就要求我可以截取将要提交的点击“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;
});

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

---

但它不起作用。对于一个简单的测试，我尝试了

$（'.tweet form'）.css（…）

，它成功地更改了一些样式更改。但是拦截提交不起作用；我甚至看不到控制台输出。这可能是因为表单标记之间没有

type=“submit”

。

您必须拦截

提交事件以防止发布新元素

您可以直接将其添加到

元素中：

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

---

拦截按钮单击事件与

stopImmediatePropagation（）

一起工作，而不是

stopPropagation（）

。问题是此按钮已经附加了一个click处理程序，并且

stopPropagation（）

仅影响父级甚至是处理程序。添加新的点击事件处理程序不会覆盖现有的处理程序

stopImmediatePropagation（）

防止调用同一事件的其他侦听器

因此，工作解决方案如下所示：

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

---

钩住

form

元素的

submit

事件，而不是点击按钮，表单实际上试图提交，但是，或者站点的JS是否添加了一些点击处理程序？@CertainPerformance它是

type=“button”

这一事实让我认为是后者。@Christian你能澄清一下吗，这样我们就可以确定什么样的解决方案会起作用？请不要发布，然后立即去AFK，这使得澄清时回答问题的可能性大大降低required@CertainPerformance请看我的更新。是的，任何地方都没有

type=“submit”

，因此我假设按钮中添加了一个单击处理程序。这是否意味着这是一个死胡同，还是对我来说。我可以使用

$（'button'）

截取所有其他按钮，如

删除

或

取消

等。可能是因为表单中没有。OP将如何做到这一点？添加了两个示例，说明如何将事件绑定到元素和查询选择器上的方法。谢谢你的指点。@MosèRaguzzini谢谢，我已经试过了，不幸的是没有用。我假设这是因为在任何地方都没有

type=“submit”

，submit由添加到按钮的事件处理程序调用。当您将提交侦听器附加到表单元素时，按钮类型并不重要，因为事件附加到表单行为