如何在“图像”类型的输入上调用onclick函数？

Question

因此，在我的代码中，我输入的是“ Image”类型。

<div class="icon" id="button_dictionary">
    <form>
        <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> 
        <label for="inputDictionary">Dictionary</label>
    </form>
</div>

我希望当用户单击它时，将显示以下表单：

<form action="http://www.google.pt/search" id="form-dictionary">
     (...)
</form>

我已经做了一个Javascript函数来实现它：

function showsDictionaryForm(){
            if(document.querySelector('#form-dictionary').style.display == "none")
                document.querySelector('#form-dictionary').style.display = "inline-block";
            else
                document.querySelector('#form-dictionary').style.display = "none";
}

问题是当我尝试处理onClick事件时，以便在发生这种情况时调用上面的函数。 该功能运行良好，因为对于“提交”输入类型，它可以正常工作。

无效的解决方案：

我尝试过这样的事情：

document.querySelector('#button_dictionary').onclick = showsDictionaryForm;

而且，在函数的末尾添加return false 。

 <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary" onClick="showsDictionaryForm()">

他们都没有一个很好的工作。 表格出现，但消失得最快。 在我看来，该表格是经过计算的，但是提交按钮后，页面会以类似的方式重新加载，然后页面又消失了。

Answer 1

在showsDictionaryForm(event)事件处理程序内部，使用event.preventDefault()阻止发生默认行为（在您的情况下，表单正在提交到服务器）。

我建议在showsDictionaryForm上使用类操作而不是内联样式。 例如，您可以全局定义：

.hidden {
  display: none !important;
}

并使用它来显示/隐藏form-dictionary形式。