2011-06-27 15 views
6

Tôi đang tạo danh sách các thẻ neo từ truy vấn MySQL/PHP; các thẻ neo gọi hàm JavaScript.Tạo danh sách thẻ neo

Các 'bắt 22' mà tôi có là:

  • href = "#" làm cho nhảy trang đầu trang mỗi khi một trong các thẻ neo được nhấp (rất khó chịu)
  • loại bỏ href = "#" có nghĩa là con trỏ không thay đổi như một thẻ neo được di chuột qua cũng không có thẻ neo có sự xuất hiện của một thẻ neo.

Tôi biết có một cách để xử lý điều này với JavaScript (có thể là jQuery) nhưng tôi không nhớ tại thời điểm này. Tuy nhiên, tôi thực sự thích một sửa lỗi HTML đơn giản hơn (nếu có) không yêu cầu tôi nhập JavaScript.

Edit: "không yêu cầu tôi để nhận được vào JavaScript" == "không đòi hỏi rộng thay đổi trong JavaScript."

Trả lời

2

Một đơn giản sửa chữa HTML cho bạn: Nói Cá nhân, cho các liên kết kiểm tra đơn giản tôi chỉ sử dụng href=""

Đối với liên kết trỏ đến một hàm javascript tôi có xu hướng sử dụng href="javascript:;". Dù bằng cách nào bạn cũng sẽ ngừng nhảy trang.

+1

Cảm ơn Scott. Điều đó làm việc cho tôi. –

+0

Ồ, đây có lẽ là một trong những bit tid hữu ích nhất mà tôi đã tìm thấy, +1. –

+0

Chúc mừng! Đơn giản nhưng hiệu quả :-) –

4

Trong chức năng javascript của bạn, bạn nên return false, hoặc với jquery bạn có thể sử dụng preventDefault()

Ví dụ:

$('a').click(function(event) { 
    event.preventDefault(); 
    // do something 
}); 

Hoặc trong trường hợp của bạn:

<a href=“#” onclick="foo();return false;"> 

Hoặc thay đổi href để javascript:void(0) :

<a href="javascript:void(0)" onclick="foo();"> 

Lý tưởng nhất, liên kết của bạn sẽ bị hỏng mà không có javascript, do đó, tùy chọn thứ ba thường sẽ bị tránh.

1

trả về false sau onclick hoặc từ bên trong hàm foo().

1

Bạn cần gọi event.preventDefault(); ở đâu đó trong trình xử lý sự kiện nhấp chuột của mình. Trong vani javascript, điều này có thể được thực hiện như sau:

<script type="text/javascript"> 
    function foo(e) { 
    e.preventDefault(); 
    // other code 
    } 
</script> 
<a href="#" onclick="foo(e);"></a> 

Ngoài ra, bạn cũng có thể trả về false:

<a href="#" onclick="foo();return false;/> 

này cũng có thể được thực hiện trong jQuery khá đơn giản:

$('.mylink').click(function(e) { 
    e.preventDefault(); 
    // other code 
}); 

Nhược điểm của việc sử dụng return false; là điều đó cũng ngăn không cho sự kiện phát sinh từ DOM. Nếu bạn không quan tâm về sự kiện sủi bọt thì không sao nếu sử dụng sai, nhưng cá nhân tôi cảm thấy tốt hơn nên sử dụng event.preventDefault(); trừ khi bạn đặc biệt muốn chặn sự kiện sôi nổi.

+0

Heh, tôi thậm chí còn không nhận ra 'preventDefault()' là vanilla javascript - cho thấy tôi đã bị hạn chế cùng với jQuery như nạng của tôi! 1 lời giải thích tốt. –

+0

jQuery không vượt qua đối tượng sự kiện của riêng nó, nhưng nó chỉ để giúp bình thường hóa trên các trình duyệt. – scurker

0
<html> 
    <head> 

    </head> 
    <body> 
    <style> 
    a { 
     text-decoration: underline; 
    } 
    a:hover { 
     text-decoration: underline; 
    } 
    </style> 
    <script type="text/javascript"> 
     function foo() { 
     alert('Hello World'); 
     } 
    </script> 
    <a onclick="foo();">Click Here</a> 
    </body> 
    </html> 

Chỉ cần thêm CSS và xóa href có vẻ ổn.