FIrefox不会阻止调度的提交事件 [英] FIrefox doesn't preventing dispatched submit event
问题描述
无语的摆弄情况再现
密钥代码为：
class Form extends React.Component {
handleSubmit(evt) {
evt.preventDefault()
var data = {}
for (var i = 0; i < this.form.elements.length; i++) {
var elt = this.form.elements[i]
if (elt.name) {
data[elt.name] = elt.value
}
}
this.props.onSubmit(data)
return false
}
submit() {
if (this.form.checkValidity())
this.form.dispatchEvent(new Event('submit'))
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)} ref={r => this.form = r}>
{this.props.children}
</form>
)
}
}
this.form之后.dispatchEvent（）在中的没有在Firefox中工作 evt.preventDefault（） handleSubmit（）
After this.form.dispatchEvent() the evt.preventDefault() in handleSubmit() doesn't work in Firefox
如果您在Chrome中打开小提琴（例如）并将数据输入到字段中，您将在控制台中看到它 - 防止调度事件将完美地运行。
If you open fiddle in Chrome (e.g.) and enter data into fields, you will see it in console - the prevention of dispatched event will work perfectly.
在Firefox中防止不起作用 - 在记录数据后，页面立即重新加载（参见控制台中的APP CONSTRUCTOR）。
In Firefox preventing doesn't work - after logging data the page immediately reloads (see "APP CONSTRUCTOR" in console).
所以，问题很明显：如何避免这个错误？
So, the question is obvious: how to avoid this bug?
推荐答案
首先，这不是特定于反应的问题。
First, this is not a react-specific question.
如何避免这个错误？
how to avoid this bug?
似乎 {cancelable：true } flag阻止Firefox在这种情况下重新加载页面。
It seems that { cancelable: true } flag prevents Firefox from reloading the page in this case.
this.form.dispatchEvent(new Event('submit', { cancelable: true }))
以下是一个完整而简单的示例：
Here's a full and simple example:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
const form = document.querySelector('#testform');
const button = form.querySelector('button');
form.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
console.log('submitting the form ...');
// return true;
return false;
};
// https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
// cancelable: (optional) a Boolean indicating whether the event can be cancelled. The default is false.
const submitEvent = new Event('submit', {
cancelable: true
});
// https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
// The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.
console.log('is event trusted', submitEvent.isTrusted) // false
console.log('is event cancelable', submitEvent.cancelable) // true
button.onclick = function () {
console.log('button clicked');
const cancelled = form.dispatchEvent(submitEvent);
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
// The return value is false if event is cancelable and at least one of the event handlers which handled this event called Event.preventDefault(). Otherwise it returns true.
console.log('is cancelled', !cancelled);
}
});
</script>
</head>
<body>
<form id="testform">
<input type="hidden" name="a" value="b">
<p>Hit the button a couple times, the page should not refresh.</p>
<button type="button">click</button>
</form>
</body>
</html>
为什么会发生这种情况：
Why this happens:
https://www.chromestatus.com / features / 5718803933560832
根据UI事件规范，不受信任的事件（即由JavaScript创建的事件）不应调用默认操作。
https://www.chromestatus.com/features/5718803933560832 According to the UI Events specification un-trusted events (i.e. those created by JavaScript) should not invoke the default action.
如果您将可取消标记更改为false并在Chrome中尝试测试，它仍然有效，因为（据我所知）它仍然是不受信任的事件（不是由直接用户交互创建的）使用UI）并且Chrome不会为不受信任的事件运行默认处理程序。
If you change the cancelable flag to false and try the test in Chrome, it would still work, because (as far as I understand) it is still an untrusted event (created not by direct user interaction with UI) and Chrome does not run default handlers for untrusted events.
但是，我不确定为什么Firefox仍会为不受信任的事件运行默认处理程序。
But, I'm not sure why Firefox still runs default handlers for untrusted events.
这篇关于FIrefox不会阻止调度的提交事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
