拦截提交事件

Question

I want to build a simple Google extensions that would stop users to submit a tweet if it contains a blacklisted word. This requires that I can intercept the click on "Tweet" that would submit it.

After inspecting the Twitter page, I currently use the following code in the content script:

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

When I click "Tweet" then I get the console output but the tweet is still submitted. Interestingly, when I use only $('button') then it works with many buttons. For example, I cannot delete a tweet anymore. So it kind of works just not for submitting new tweets, and I cannot tell why that's the case. Here's the snippet from Twitter HTML page:

How can I intercept and stop the submission of tweets.

Update: I've tried intercepting the form submit as suggest below. Since the form doesn't have an id, I used a class selector:

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

But it's not working. For a trivial test I tried $('.tweet-form').css(...) which successfully changed some style changes. However intercepting the submit doesn't work; I don't even see the console output. Maybe that's because there's no type="submit" anywhere between the form tags.

Answer 1

You have to intercept the <Form /> submit event to prevent the post of a new element.

You can add it directly in your <Form /> element:

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

Or you can use a selector:

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

Answer 2

Intercepting the button click event works with stopImmediatePropagation() instead stopPropagation() . The problem is that this button already has an click handler attached to it, and stopPropagation() only affects parent even handlers. And adding a new click event handlers doesn't overwrite existing ones. stopImmediatePropagation() prevents other listeners of the same event from being called.

Thus, the working solutions looks like:

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