Question

我试图在点击链接时调用javascript函数。实际上我想使用post方法点击链接提交表单，所以我想尝试以下操作 -

<a href="javascript:submitCategory(this)" >Handicrafts</a>

并在javascript中

function submitCategory(varthis)
{   
    alert(varthis.value);
}

我有几个重要问题： 1＆gt;当我点击链接时，函数submitCategory被调用两次。经过大量分析后发现我有两个js文件，并删除其中一个使得该函数只被调用一次。含义当我包括

<script type ="text/javascript" src="jquery.js"></script>
    <script type ="text/javascript" src="cWed.js"></script>

submitCategory函数被调用两次

当我删除其中一个并包括

<script type ="text/javascript" src="jquery.js"></script>

submitCategory函数只被调用一次。

为什么会这样？

2 - ; alert（thisvar.value）应返回Handicrafts，但返回undefined。为什么会这样？

3＆gt;究竟是什么意思href =＆＃34; javascript：submitCategory（this）＆＃34;？我没有在任何教程中遇到过这个问题。在这里包括这个应该参考元素＆＃34; a＆＃34;正确？

Answer 1

~~1。您不需要使用限定符'javascript：'~~
2.当你在html中挂钩事件时，总是尝试像event_handler(event)那样。注意：event是事件对象。而不是一些随机变量。您可以在网上的许多地方阅读更多相关信息。在您的情况下，varthis是事件对象。要使用varthis.target来访问此元素，然后获取其内部html，您可以使用varthis.target.innerHTML
3.调用函数时，您必须通过事件标记显式获取调用元素的html内容，或者只使用jquery。您不能以您认为现在正在传递的方式传递变量。
4.如果您实际上是在尝试提交表单，我建议在脚本而不是HTML中挂钩onSubmit事件，并将自定义表单提交代码放在那里。如果您不需要在表单提交中执行任何自定义操作，则只需将目标服务器功能的url放在表单的action属性中即可。

示例代码：

<form>
    <a href="#" id="submitCategoryLink">Submit Category</a>
</form>
<script type="text/javascript">
    $('#submitCategoryLink').on('click', function (e) {
        alert(e.target.innerHTML)
    });
</script>

Answer 2

由于您尚未发布cWed.js的内容，因此很难知道您为什么要提交双重提交，但我的猜测是它包含了自己的click处理程序，这是复制默认处理程序。
varthis.value无效的原因是因为.value仅用于<input>和<select>元素，它包含用户输入的值或从菜单中选择。要获取元素的文本内容，您应该使用.innerHTML。
以javascript:开头的URI意味着浏览器应该在该前缀之后执行Javascript代码，而不是从网络位置获取页面。它不是官方认可的URI方案（有一个Internet-Draft RFC，但它在2年前过期了），但所有浏览器都支持它。
当代码从javascript: URI执行时，this是窗口，而不是被点击的元素。您需要使用onclick处理程序将this设置为元素。

以下作品：

<a href="javascript:void(0)" onclick="submitCategory(this); return false;" >Handicrafts</a>

function submitCategory(varthis)
{   
    alert(varthis.innerHTML);
}

FIDDLE

javascript函数被调用两次

2 个答案: