如果在对话框中有一个文件输入,取消文件选择会导致对话框关闭。为什么会发生这种情况,如何防止这种情况发生?
<dialog open>
<input type="file">
</dialog>
编辑:
在Firefox中,对话框保持打开状态(如预期)。在Chrome中,对话框关闭(不符合预期)。
const dialog = document.getElementById("dialog");
let prematurelyClosed = false;
dialog.addEventListener("cancel", (e) => {
if(e.target !== dialog)
prematurelyClosed = true;
// or simply prematurelyClosed = e.target !== dialog
})
dialog.close()
。dialog.addEventListener("close", (e) => {
if(prematurelyClosed){
dialog.showModal();
prematurelyClosed = false;
}
})
所以最后,我得到了这个解决了我的问题,并希望能帮到你的。
const dialog = document.getElementById("dialog");
let prematurelyClosed = false;
dialog.addEventListener("cancel", (e) => {
if(e.target !== dialog)
prematurelyClosed = true;
// or simply prematurelyClosed = e.target !== dialog
})
dialog.addEventListener("close", (e) => {
if(prematurelyClosed){
dialog.show();
prematurelyClosed = false;
}
})
<dialog open id="dialog">
<input type="file">
<button onclick="dialog.close()">Close</button>
</dialog>
cancel
事件对象的cancelable: false
,这可能是为什么在对话框的cancel
事件处理程序中调用e.preventDefault()
无法阻止其关闭的原因。我猜你也尝试过这个方法。我还尝试了在文件输入上处理cancel
事件,并使用preventDefault()
或stopPropagation()
,但是无论我尝试了什么,都无法阻止对话框接收到不可取消的cancel
事件并关闭。你对如何实现这一点有进一步的见解吗? - NeekstopImmediatePropagation()
,但都没有成功。顺便说一下,这似乎确实是Chromium的一个bug,而且已经有补丁一段时间了。虽然我不知道我们什么时候会在浏览器上看到它,但希望很快。 - UrbanVersion 117.0.5855.0 (Developer Build) (64-bit)
(通过$ npx @puppeteer/browsers install chromium@latest
),问题似乎已经解决了。文件输入获得了“cancel”事件,对话框也收到了“cancel”事件,但没有收到“close”事件。根据当前的行为,文件输入和对话框元素接收到的“cancel”事件(不确定是否是同一个事件对象)仍然具有cancelable:false
属性。我会等待稳定版本发布,并暂时忽略这个问题。 - Neek@HostListener('cancel', ['$event'])
onCancel(event: Event){
console.log('Cancel host listener.');
event.stopImmediatePropagation();
};
const dialog = document.getElementById("dialog");
dialog.addEventListener('close', (e) => {
dialog.showModal();
});
const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
dialog.style.display = "none";
});
<dialog id="dialog" open>
<input type="file" />
<button class="close">Close</button>
</dialog>
<input>
标签没有</input>
这样的东西。把它删掉。 - Rob