Question

我遇到的情况是我无法弄清楚谁在调用表单提交。

我有一个像下面的dom。

<form method="POST" action="action.do">
<button onclick = "eventHandler()">Test</button>
</form>

每当我点击按钮时，我会在提交时看到断点，但无法从调用堆栈中找出任何内容。

需要帮助

Answer 1

通常，请避免使用onxyz - 属性样式的事件处理程序。但如果你这样做，请打电话给他们正确设置this并传递事件;如果您想在处理程序中使用return来阻止事件的默认操作，您可能还想要包含return false：

<button onclick = "return eventHandler.call(this, event)">Test</button>
<!-- --------------^^^^^^--------------^^^^^^^^^^^^^^^^^             -->

（如果没有返回，在现代浏览器上，您可以在事件对象上使用preventDefault()方法，而不是返回false。）

在处理程序中，this将引用元素（在本例中为button），第一个参数将是事件对象，其中包含其他有用信息。

请注意，此处理程序不处理submit事件。它在提交按钮上处理click事件。 submit是在表单而不是按钮上触发的事件。

但是，一般情况下，我建议使用现代事件处理，一旦按钮存在，就会挂起事件：

var btn = document.querySelector("selector-for-the-button");
btn.addEventListener("click", eventHandler, false);

这样，eventHandler将使用正确的this调用并传递事件对象。

注意：过时的IE8及更早版本的浏览器没有addEventListener。过时的浏览器IE9-IE10拥有它，但假装他们没有“兼容性”＃34;模式。在兼容性方面，IE11同样蹒跚而行。模式。如果您需要支持其中任何一项，可以使用hookEvent函数in this answer。

当然，使用像jQuery这样的库，或像AngularJS或React等框架来处理这些跨浏览器问题。

Answer 2

由于type代码中未指定button属性：

<button onclick = "eventHandler()">Test</button>

默认type为submit，因此点击此button后，在完成form代码后提交eventHandler()。要使button不提交表单，请添加type属性，其值为button。

Answer 3

以下是您正在寻找的完整代码：

＆＃13;

function eventHandler(e){
  console.log(e.target);
}

＆＃13;

<html>
	<head>
		<title>Title</title>
	</head>
	<body>
		<form method="POST" action="action.do" onsubmit="return false;">
			<button onclick = "eventHandler(event)">Test</button>
		</form>
	</body>
</html>

＆＃13;

如何找出谁正在解雇提交事件？

3 个答案: