使用 js 技术进行页面交互，实现默认按钮点击形式下数据提交

发布时间：2023-08-08 14:10:04 所属栏目：教程来源：

导读：在实际的应用开发中，我们会常常用到JS的模事件，但有时会遇到一些问题，比如说点击事件，举个简单的例子，点击表单外的“提交”按钮来提交表单。上代码吧。

Html:

代码如下:

<h3>请单击&ldqu

在实际的应用开发中，我们会常常用到JS的模事件，但有时会遇到一些问题，比如说点击事件，举个简单的例子，点击表单外的“提交”按钮来提交表单。上代码吧。

Html:

代码如下:

<h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>

<button id="btn">提交</button>

<form action="#" method="get" id="form">

<input type="text" name="site" value="www.woiweb.net" readonly/>

<input id="subbtn" type="submit" value="先别点击此按钮提交" onclick="alert('我已经提交了');"/>

</form>

Javscript:

代码如下:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//通用方法

btn.onclick = function() {

sub.click();

}

</script>

经过测试，IE，FF，Chrome，Opera，Safari都没有问题，均可正常提交表单。

但在实际的设计中，为了让提交按钮更好看，buildder经常把它们用a标签来处理，加个背景图片来模拟按钮，我们仍然用上面的思路来尝试，增加一个a标签，让它来提交表单，我们仅修改html。

Html:

代码如下:

<h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3>

<button id="btn">提交</button>

<form action="#" method="get" id="form">

<input type="text" name="site" value="www.woiweb.net" readonly/>



<a id="subbtn" href="javascript:;" onclick="alert('在此调用提交表单的方法')">模拟提交按钮</a>

</form>

Javascript:

代码如下:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//通用方法

btn.onclick = function() {

sub.click();

}

</script>

运行后，问题出现了，IE、FF、Opera均OK，但Chrome和Safari不能正常运行，后来网上搜索了下，发现a标签并不是和按钮一样有onclick()事件的，解决办法是针对 IE 和 FF编写不同的逻辑，JS代码如下：

javascript:

代码如下:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//通用方法

btn.onclick = function() {

//sub.click();

if (/msie/i.test(navigator.userAgent)) //IE

{

sub.fireEvent("onclick");

} else {

var e = document.createEvent('MouseEvent');

e.initEvent('click', false, false);

sub.dispatchEvent(e);

}

}

</script>

至此，问题解决，虽然这个问题很简单，但很容易被大家忽略，贴出来和大家一起分享。

语法：

createEvent(eventType)

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!