Question

Let me start off by saying that the code in question is part of a UserScript and, as such, normal DOM rules and Javascript methods do not work.

Here is the situation:

I have written a UserScript that interacts with an online chat site. I have a number of button that are generated within the user script. Some of these buttons are located inside of a form, while many of them are not.

Elements added through GreaseMonkey live in two worlds — they live on the page DOM and they live in the slightly elevated world of UserScripts, which mean that these lines:

event.preventDefault = true;
event.stopPropagation = true;

prevent the rest of the UserScript actions from running, but it does not stop the button from causing a form submit.

As a work around, I am building span elements instead of a button. This works, but it really breaks the visual layout of the chat room.

Does anyone know a way to prevent elements added by UserScripts to prevent form submissions? Failing that, I’ll dream that someone knows how to make a span look like a native button.

Edit: I have a solution which seems to be working — but I haven’t fully tested it under every UserScript environment:

  // Yes, yes, poorly named but it was a SPAN
  // userWindow is an alias for unsafeWindow.
  // (Used to run under a userScript environment for IE and I had to emulate a lot)
  var span = document.createElement("input");
  span.value = text;
  span.type = "button";
  span.className = "cpbutton";

  // Add it to the body just long enough to set up a page-level, DOM0 event handler
  var body = userWindow.document.getElementsByTagName("body")[0];
  var tname = "IAmTheVeryModelOfAModernMajorGeneral";     
  span.id = tname;
  body.appendChild(span);
  userWindow.document.getElementById(tname).onclick = function() {return false;};
  body.removeChild(span);
  span.id = "";

Answer 1

See the W3C spec for <button>.
By default, a <button> element acts as a submit button inside a form. This means that event.preventDefault() (the correct usage, BTW), on the click handler, may not be enough to stop the form submit.

In that case you could intercept the form’s submit event too BUT, the smart thing to do is to use the type attribute to tell the browser not to treat the button as a submit button.
EG:

<button type="button">Your button markup</button>