如何在HTML中调用JavaScript函数而不是使用href链接？

Question

我有一些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中已加载的函数，而不是尝试在浏览器中打开它们。

- user605334

---

类似的问题已经在Stackoverflow上得到了回答。 https://dev59.com/w3NA5IYBdhLWcg3wKaYx#11348403 - Scaria Sebastian

Answer 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');">

- Dutchie432

---

如何传递一个字符串并在参数中转义双引号？该示例仅包含整数。 - jeffry copps

@jeffrycopps 尝试在你的函数内使用单引号。 - ineedme

@ineedme，已更新答案并包含该信息。谢谢。 - Dutchie432

Answer 2

如果你只需要一个“点击事件处理程序”，请使用而不是链接。 链接具有特定的语义含义。

例如：

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

- Felix Kling

---

有没有办法让按钮看起来像链接而不是按钮？ - Ben Page

@Ben Page：是的，可以用CSS实现。至少你可以得到一个很好的近似值。请参见我的回答和这里的评论：https://dev59.com/yVPTa4cB1Zd3GeqPm9v9#4842962 - Felix Kling

Answer 3

尽量使你的JavaScript不显眼：

• 应在href属性中使用真正的链接
• 并添加单击事件侦听器来处理Ajax

- soju

---

href是可选的，可以省略。 - Colin 't Hart

一个a标签是一个锚点；它不一定要有链接。 - Colin 't Hart

Answer 4

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

- tolsen64

---

以上的'url'函数参数给了我一个字符串"url"而不是实际的URL。 - visrahane

你应该在showWindow函数中放入实际的URL。例如：javascript:showWindow('https://stackoverflow.com'); - tolsen64

我无法硬编码它，因为我是使用DOM创建它的，并且我无法控制URL。 - visrahane

Answer 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;

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

- hellsgate

---

href是可选的，可以省略。 - Colin 't Hart

Answer 6

这句话无法直接翻译，因为它是一段包含代码的HTML标签。但是它的作用是创建一个链接，当被点击时会触发ShowOld函数。

- nico

---

不是最佳解决方案，因为这会使页面跳到顶部。 - Alex

使用href="javascript:void(0)代替#。 - Narayan

href是可选的，可以省略。 - Colin 't Hart

Answer 7

href 对于 a 元素是可选的。

仅使用

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

- Colin 't Hart