拦截提交事件答案

【问题标题】：Intercept submit event拦截提交事件
【发布时间】：2019-06-04 03:36:09
【问题描述】：

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

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

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

当我单击“Tweet”时，我会得到控制台输出，但仍会提交推文。有趣的是，当我只使用$('button') 时，它可以与许多按钮一起使用。例如，我不能再删除一条推文。所以它只是不适用于提交新推文，我不知道为什么会这样。这是来自 Twitter HTML 页面的 sn-p：

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

更新：我已尝试按照以下建议拦截表单提交。由于表单没有 id，所以我使用了类选择器：

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

但它不起作用。对于一个简单的测试，我尝试了$('.tweet-form').css(...)，它成功地改变了一些风格变化。但是拦截提交不起作用；我什至没有看到控制台输出。可能是因为表单标签之间没有type="submit"。

【问题讨论】：

挂钩到 form 元素的 submit 事件，而不是点击按钮
该表单是否真的尝试提交，或者网站的 JS 添加了一些点击处理程序？
@CertainPerformance type="button" 让我觉得是后者。
@Christian 您能否澄清一下，以便我们确定哪种解决方案有效？请不要发布然后立即去 AFK，这样在需要澄清时回答问题的可能性就会大大降低
@CertainPerformance 请查看我的更新。是的，任何地方都没有type="submit"，所以我假设按钮中添加了一个点击处理程序。这是否意味着这是一个死胡同或对我来说。我可以使用$('button') 拦截所有其他按钮，例如Delete 或Cancel 或诸如此类。可能是因为表格内没有。

标签： javascript jquery twitter

【解决方案1】：

你必须拦截<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
    }
});

【讨论】：

那么 OP 将如何做到这一点？
添加了两个示例，说明如何将事件绑定到元素和查询选择器上的方法。感谢您指出这一点。
@MosèRaguzzini 谢谢，我试过了，不幸的是没有用。我认为这是因为在任何地方都没有type="submit"，并且提交是由添加到按钮的事件处理程序调用的。
当您将提交侦听器附加到表单元素时，按钮类型并不重要，因为事件附加到表单行为

【解决方案2】：

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

因此，可行的解决方案如下所示：

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

【讨论】：