Cách gọi hàm JavaScript thay vì href trong HTML

Tôi có một số mô hình giả lập bằng HTML

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

Tôi đã nhận được phản hồi từ máy chủ khi tôi gửi yêu cầu.

Với mô hình này, tôi nhận được phản hồi của yêu cầu AJAX gửi mã của tôi đến máy chủ.

Vâng, mọi thứ đều ổn nhưng khi tôi nhấp vào liên kết, trình duyệt muốn mở chức năng dưới dạng liên kết; nghĩa là sau khi nhấp tôi thấy thanh địa chỉ là

javascript:ShowOld(2367,146986,2)

có nghĩa là trình duyệt điều đó là url nếu tôi muốn làm điều này trong firebug đó là công việc. Bây giờ tôi muốn làm điều đó sau đó khi bất kỳ ai nhấp vào liên kết thì trình duyệt sẽ cố gắng gọi hàm đã được tải trong DOM thay vì cố gắng mở chúng trong trình duyệt.

Cú pháp đó sẽ hoạt động tốt, nhưng bạn có thể thử thay thế này.

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

hoặc là

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

CẬP NHẬT CÂU TRẢ LỜI CHO CÁC GIÁ TRỊ STRING

Nếu bạn đang chuyển chuỗi, hãy sử dụng dấu ngoặc kép cho các tham số của hàm của bạn

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

Nếu bạn chỉ có là "trình xử lý sự kiện nhấp chuột", hãy sử dụng <button>thay thế. Một liên kết có một ý nghĩa ngữ nghĩa cụ thể.

Ví dụ:

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

Cố gắng làm cho javascript của bạn không phô trương:

• bạn nên sử dụng một liên kết thực trong thuộc tính href
• và thêm người nghe vào sự kiện nhấp chuột để xử lý ajax

Tôi sử dụng một chút CSS trên một span để làm cho nó giống như một liên kết như vậy:

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");
}

Bạn cũng nên tách javascript khỏi 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);

Chỉ cần đảm bảo dòng cuối cùng trong hàm ShowOld là:

return false;

vì điều này sẽ ngăn liên kết mở trong trình duyệt.

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

hreflà tùy chọn cho acác phần tử.

Nó hoàn toàn đủ để sử dụng

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