如何防止用户脚本[GreaseMonkey / TamperMonkey]添加的按钮提交表单

Question

首先让我说有问题的代码是UserScript的一部分，因此，正常的DOM规则和Javascript方法不起作用。

情况如下：

我编写了一个与在线聊天网站交互的UserScript。我在用户脚本中生成了一些button。其中一些按钮位于表单内部，而其中许多按钮不是。

通过GreaseMonkey添加的元素存在于两个世界中 - 它们位于页面DOM上，它们生活在稍高的UserScripts世界中，这意味着这些行：

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

阻止其他UserScript操作运行，但不会停止按钮导致表单提交。

作为解决方法，我正在构建span元素而不是button。这有效，但它确实打破了聊天室的视觉布局。

是否有人知道阻止UserScripts添加的元素以阻止form提交的方法？如果做不到这一点，我会梦见有人知道如何使span看起来像本地人button。

编辑：我有一个似乎有效的解决方案 - 但我还没有在每个UserScript环境下对其进行全面测试：

  // 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

请参阅the W3C spec for <button> 默认情况下，<button>元素充当表单内的提交按钮。这意味着点击处理程序上的event.preventDefault()（正确用法，BTW）可能不足以停止表单提交。

在这种情况下你也可以截取表单的提交事件但，聪明的做法是使用type属性告诉浏览器不要将按钮视为提交按钮。
EG：

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

Answer 2

当你说

时

  

防止UserScripts添加的元素阻止表单提交

我不确定您是否要允许或阻止提交表单...

无论如何，这是一个link和一个div伪装成button：http://jsfiddle.net/RASG/PvhUb/

如果您发布了一些代码，我可以帮助您完成脚本。