Question

我写了一个愚蠢的示例，以查看click或submit事件中的哪一个首先在类型为submit的输入上触发。

但是，当我运行它时，没有任何内容写入控制台。

单步调试器中的代码揭示了以下一系列情况。

它将首先触发click事件处理程序，将文本“ click”写入控制台，但随后不久，该文本将从控制台中消失。
此外，永远不会触发submit事件。

我推断执行按钮的click事件后正在提交表单。我不明白的是为什么它没有进入我的submit事件处理程序中？

下面是相关代码，这里是the full working example。这只是一个简单的HTML文件，您可以下载该文件并在您的计算机上试用。

(function() {
let btn = document.getElementById("btnSave");

btn.addEventListener("click", function(event) {
	console.log("click");
}, false);
btn.addEventListener("submit", function(event) {
	console.log("submit");
	// event.preventDefault();
}, false);

console.log("All done now. Click da button, chum, click it I say!");

})();

div { margin: 20px; }
input[type="submit"] { width: 200px; height: 50px; }

<div>Look at the console and then click the button, chum!</div>

<div>
    <form>
        <input type="submit" id="btnSave" value="Save" width="200px" />
    </form>            
</div>

Answer 1

我不明白的是为什么它没有进入我的提交事件处理程序中？

24.855362868957645元素没有for ( i = 0; i < totalItemSelected; i++) { StorageReference storage=mStorage .child("User_Pictures") .child(UID) .child("Ads_pictures") .child(MyAds.getId()) .child(System.currentTimeMillis()+"."+getFileExtension(fileUri)); storage.putFile(fileUri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() { @Override public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) { Toast.makeText(getContext(), "done", Toast.LENGTH_SHORT).show(); newUri = taskSnapshot.getDownloadUrl(); assert newUri != null; Adphotos_item adphotos_item=new Adphotos_item(newUri.toString()); // Map<String, Object> map = new HashMap<>(); // map.put("listExample", Arrays.asList(newUri.toString())); Ref.collection("Users") .document(UID) .collection("MyAds") .document(MyAds.getId()) .collection("photos") .document() .set(adphotos_item,SetOptions.merge()); } }); }事件。您需要将input钩在submit上，而不是submit上。

form

（{input，如果您愿意，可以有btn.form.addEventListener("submit", function(event) { // ^^^^^ console.log("submit"); event.preventDefault(); }, false);，尽管btn.form得到了更广泛的支持，并且也是standardized。或者，当然，请使用{ {1}}或btn.closest("form")来检索btn.form元素。）

实时示例：

getElementById

querySelector

form

未触发提交类型输入的Submit事件

1 个答案: