拦截提交事件

时间:2019-01-09 11:11:52

标签: javascript jquery twitter

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

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

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

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

enter image description here

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

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

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

因此,有效的解决方案如下:

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