javascript 函数被调用两次

Question

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

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

在 JavaScript 中

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

我有几个重要的问题: 1>当我点击链接时，函数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，但它返回未定义。为什么会这样？

3> href="javascript:submitCategory(this)"的具体含义是什么？我在任何教程中都没有遇到过这个。在这里包含这个应该指的是元素“a”，对吗？

Answer 1

1。您不需要使用限定符“javascript:”
2. 当你在html中hook事件时，总是尝试像event_handler(event)那样做。注意:event是事件对象。而不是这里的一些随机变量。您可以在网络上的许多地方阅读有关它的更多信息。在您的情况下， varthis 是事件对象。要访问此元素，请使用 varthis.target ，然后要获取其内部 html，您可以使用 varthis.target.innerHTML
3. 调用函数时，您必须通过事件标记显式获取调用元素的 html 内容，或者仅使用 jquery。您不能以您认为现在传递的方式传递变量。
4.如果您实际上正在尝试提交表单，我建议在脚本而不是 HTML 中 Hook 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>