如何在 HTML 中调用 javascript 函数而不是 href

问题描述

我有一些 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 中的功能，而不是试图在浏览器中打开它们。

最佳解决方案

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

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

要么

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

次佳解决方案

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

例如。：

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

第三种解决方案

尝试使您的 JavaScript 不引人注意：

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

第四种方案

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

第五种方案

您还应该将 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;

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

第六种方案

我在一个跨度上使用一点 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");
}

参考文献

How to call javascript function instead of href in HTML

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何在 HTML 中调用 javascript 函数而不是 href