单击触发器表单中的图像提交答案

【问题标题】：Click on image in triggers form submit单击触发器表单中的图像提交
【发布时间】：2019-08-28 18:14:11
【问题描述】：

我有一个表单，默认情况下会触发单击图像提交表单。我不明白为什么单击会触发表单提交。有人可以指导一下吗？

<form name="test1" action="er" method="post" onsubmit="return validateForm()"
<input type="text" id="du" name="du" value="74491" onkeyup="showButton()">
<input type="image" src="../images/save-icon.png" width="20" height="20" ></form>

【问题讨论】：

可能有一段被调用的 JavaScript 没有包含在此处...
它的功能..从他下面的回答中得到它。感谢您的调查。

标签： javascript html forms

【解决方案1】：

这是预期的行为。根据standard：

图像类型的输入元素用于创建图形提交按钮，即提交采用图像形式的按钮，而不是比文字。

【讨论】：

确实，浏览器还会发送 x 和 y 参数，给出被点击图像的坐标。

【解决方案2】：

输入 type="image" 仅将该图像定义为提交按钮。更多check this one

【讨论】：

【解决方案3】：

请使用<img src=''>

而不是<input type='image'>。

因为输入类型图像会触发默认提交操作！否则，这里有一个示例脚本，它会在您单击图像输入时停止表单提交。

希望我的代码能帮到你！

document.addEventListener("click", function(e){
  const path=e.path;
  for(let i=0;i<path.length-4;i++){
    if(path[i].tagName=="INPUT"&&path[i].type=="image"){
      var form=path[i].parentNode;
      while(form.tagName!="FORM") form=form.parentNode;
      
      let currentSubmitAttr=form.getAttribute("onsubmit");
      
      form.setAttribute("onsubmit", "return false;");
      setTimeout(function(){
        form.setAttribute("onsubmit", currentSubmitAttr);
      }, 100);
    }
  }
  return false;
});

<form action="action.php">
  <input type="text" name="du">
  <br><br>
  <input type='image' src='https://dummyimage.com/300x250/000/fff'>
</form>

【讨论】：

不客气，还有什么可以帮助您的吗？