javascript函数被调用两次

Question

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

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

和在JavaScript

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

我有几个重要的问题：1>当我单击链接时，函数commitCategory被调用两次。 经过大量分析，发现我包含两个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> href =“ javascript：submitCategory（this）”的确切含义是什么？ 我在任何教程中都没有遇到过。 并且在这里包括这个应该指的是元素“ a”对吗？

Answer 1

1.您不需要使用限定符'javascript：'
2.当您将事件挂接到html中时，请始终尝试像event_handler(event) 。 注意：event是事件对象。 而不是一些随机变量。 您可以在网络上的许多地方阅读有关它的更多信息。 在您的情况下， varthis是事件对象。 要访问此元素，请使用varthis.target ，然后获取其内部html，您可以使用varthis.target.innerHTML
3.调用函数时，您必须通过event标签显式获取调用元素的html内容，或者仅使用jquery。 您不能以您认为当前正在传递的方式传递变量。
4.如果您实际上是在尝试提交表单，建议您将onSubmit事件挂接到脚本而不是HTML中，然后在其中放置自定义表单提交代码。 如果您不需要在表单提交中进行任何自定义操作，则只需将目标服务器功能的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

1. 由于您尚未发布cWed.js的内容，因此很难知道为什么要进行两次提交，但是我猜测它包含一个自己的click处理程序，它会复制默认处理程序。

2. varthis.value不起作用的原因是因为.value仅用于<input>和<select>元素，它包含用户输入或从菜单中选择的值。 要获取元素的文本内容，您应该使用.innerHTML 。

3. 以javascript:开头的URI javascript:意味着浏览器应该在该前缀之后执行Javascript代码，而不是从网络位置获取页面。 它不是官方认可的URI方案（存在Internet草案RFC，但已在2年前失效），但是所有浏览器都支持它。

4. 从javascript: URI执行代码时， this是窗口，而不是单击的元素。 您需要使用onclick处理程序this设置设置为元素。

以下作品：

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

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

小提琴