如何在 HTML 中呼叫 javascript 函式而不是 href

問題描述

我有一些 html 的模型

<a href=""><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="" onclick="ShowOld(2367,146986,2);">

要麼

<a href="">

次佳解決方案

如果您只具有「點選事件處理程序」，請改用<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