如何在 HTML 中调用 JavaScript 函数而不是 href答案

【问题标题】：How to call JavaScript function instead of href in HTML如何在 HTML 中调用 JavaScript 函数而不是 href
【发布时间】：2011-06-27 14:15:30
【问题描述】：

我有一些 HTML 模型

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

当我发送请求时，我得到了服务器的响应。

通过这个模型，我得到了 AJAX 请求的响应，该请求将我的代码发送到服务器。

好吧，一切都很好，但是当我单击链接时，浏览器希望将功能作为链接打开；意思是点击后我看到地址栏为

javascript:ShowOld(2367,146986,2)

表示浏览器的东西是 url，如果我想在 firebug 中这样做的话。现在我想这样做，然后当任何人单击链接时，浏览器会尝试调用已加载到 DOM 中的函数，而不是尝试在浏览器中打开它们。

【问题讨论】：

Stackoverflow 本身回答了类似的问题。 stackoverflow.com/questions/1070760/…

标签： javascript html debugging

【解决方案1】：

该语法应该可以正常工作，但您可以尝试这种替代方法。

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

或

<a href="javascript:ShowOld(2367, 146986, 2);">

字符串值的更新答案

如果要传递字符串，请在函数参数中使用单引号

<a href="javascript:ShowOld('foo', 146986, 'bar');">

【讨论】：

如何在参数中传递转义双引号的字符串？ H=这个例子只有整数。
@jeffrycopps 在你的函数中尝试单引号
@ineedme Answer 已更新该信息。谢谢。

【解决方案2】：

如果您只有“点击事件处理程序”，请改用<button>。链接具有特定的语义含义。

例如：

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

【讨论】：

有没有办法让按钮看起来像一个链接而不是一个按钮？
@Ben Page：是的，使用 CSS。至少你得到了一个很好的近似值。在此处查看我的答案和 cmets：stackoverflow.com/questions/4842953/or-javascriptvoid0/…

【解决方案3】：

尽量让你的 javascript 不显眼：

你应该在 href 属性中使用真实的链接
并在点击事件上添加一个监听器来处理 ajax

【讨论】：

href 是可选的，省略即可。
一个a标签是一个锚；它不必有链接。

【解决方案4】：

我在 span 上使用了一些 CSS，使它看起来像这样的链接：

CSS：

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML：

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT：

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

【讨论】：

上面的“url”函数参数给了我字符串“url”而不是实际的url
您应该将实际的 URL 放在 showWindow 函数中。例如：javascript:showWindow('stackoverflow.com');
我无法对其进行硬编码，因为我正在使用 dom 创建它并且我无法控制 url

【解决方案5】：

您还应该将 javascript 与 HTML 分开。
HTML：

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript：

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

只要确保 ShowOld 函数的最后一行是：

return false;

因为这将阻止链接在浏览器中打开。

【讨论】：

href 是可选的，省略即可。

【解决方案6】：

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">

【讨论】：

不是最佳解决方案，因为这会跳转到页面顶部。
对于 href 而不是 # 使用 href="javascript:void(0)
href 是可选的，省略即可。

【解决方案7】：

href 对于 a 元素是可选的。

完全够用

<a onclick="ShowOld(2367,146986,2)">link text</a>

【讨论】：