Tôi muốn chạy một hàm JavaScript đơn giản khi nhấp mà không cần chuyển hướng.

Có sự khác biệt hay lợi ích nào giữa việc đặt lệnh gọi JavaScript trong hrefthuộc tính không (như thế này:

<a href="javascript:my_function();window.print();">....</a>

) so với việc đặt nó trong onclickthuộc tính (ràng buộc nó với onclicksự kiện)?

Đặt onclick trong href sẽ xúc phạm những người tin tưởng mạnh mẽ vào việc tách nội dung khỏi hành vi / hành động. Đối số là nội dung html của bạn chỉ nên tập trung vào nội dung, không tập trung vào trình bày hoặc hành vi.

Đường dẫn điển hình ngày nay là sử dụng thư viện javascript (ví dụ: jquery) và tạo một trình xử lý sự kiện bằng thư viện đó. Nó sẽ trông giống như:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

xấu:

<a id="myLink" href="javascript:MyFunction();">link text</a>

tốt:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

tốt hơn:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

thậm chí tốt hơn 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

thậm chí tốt hơn 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Tại sao tốt hơn? bởi vì return falsesẽ ngăn trình duyệt theo liên kết

tốt:

Sử dụng jQuery hoặc khung tương tự khác để đính kèm trình xử lý onclick theo ID của phần tử.

$('#myLink').click(function(){ MyFunction(); return false; });

Về mặt javascript , một điểm khác biệt là thistừ khóa trong onclicktrình xử lý sẽ đề cập đến phần tử DOM có onclickthuộc tính (trong trường hợp này là <a>phần tử), trong khi thistrong hrefthuộc tính sẽ đề cập đếnwindow đối tượng.

Về mặt trình bày , nếu một hrefthuộc tính vắng mặt trong một liên kết (nghĩa là <a onclick="[...]">) thì theo mặc định, các trình duyệt sẽ hiển thị textcon trỏ (chứ không phải pointercon trỏ thường mong muốn ) vì nó đang xử lý<a> là một neo và không phải là một liên kết.

Về mặt hành vi , khi chỉ định một hành động bằng cách điều hướng qua href, trình duyệt thường sẽ hỗ trợ mở hành động đó hreftrong một cửa sổ riêng bằng cách sử dụng phím tắt hoặc menu ngữ cảnh. Điều này là không thể khi chỉ định một hành động chỉ thông qua onclick.

Tuy nhiên, nếu bạn đang hỏi cách tốt nhất để có hành động động từ nhấp chuột của đối tượng DOM, thì đính kèm một sự kiện bằng cách sử dụng javascript tách biệt với nội dung của tài liệu là cách tốt nhất để đi. Bạn có thể làm điều này theo một số cách. Một cách phổ biến là sử dụng thư viện javascript như jQuery để liên kết một sự kiện:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

tôi sử dụng

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Một chặng đường dài nhưng nó hoàn thành công việc. sử dụng kiểu A để đơn giản hóa sau đó nó trở thành:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Ngoài tất cả ở đây, href được hiển thị trên thanh trạng thái của trình duyệt và onclick thì không. Tôi nghĩ rằng nó không thân thiện với người dùng để hiển thị mã javascript ở đó.

cách tốt nhất để làm điều này là với:

<a href="#" onclick="someFunction(e)"></a>

Vấn đề là điều này S add thêm một hàm băm (#) vào cuối URL của trang trong trình duyệt, do đó yêu cầu người dùng nhấp vào nút quay lại hai lần để đi đến trang trước trang của bạn. Xem xét điều này, bạn cần thêm một số mã để dừng lan truyền sự kiện. Hầu hết các bộ công cụ javascript sẽ có chức năng này. Ví dụ: bộ công cụ dojo sử dụng

dojo.stopEvent(event);

làm như vậy.

Câu trả lời hàng đầu là một thực tiễn rất xấu, người ta không bao giờ nên liên kết với một hàm băm trống vì nó có thể tạo ra các vấn đề trên đường.

Tốt nhất là liên kết một trình xử lý sự kiện với phần tử như nhiều người khác đã tuyên bố, tuy nhiên, <a href="javascript:doStuff();">do stuff</a> hoạt động hoàn hảo trong mọi trình duyệt hiện đại và tôi sử dụng nó rộng rãi khi kết xuất các mẫu để tránh phải khởi động lại từng trường hợp. Trong một số trường hợp, phương pháp này cung cấp hiệu suất tốt hơn. YMMV

Một tid-bit thú vị khác ....

onclick & href có các hành vi khác nhau khi gọi javascript trực tiếp.

onclicksẽ vượt qua thischính xác bối cảnh, trong khi hrefsẽ không, hoặc nói cách khác <a href="javascript:doStuff(this)">no context</a>sẽ không hoạt động, trong khi đó<a onclick="javascript:doStuff(this)">no context</a> sẽ.

Vâng, tôi đã bỏ qua href. Mặc dù điều đó không tuân theo thông số kỹ thuật, nhưng nó sẽ hoạt động trong tất cả các trình duyệt, mặc dù, lý tưởng là nó nên bao gồm một href="javascript:void(0);"biện pháp tốt

Có javascript:trong bất kỳ thuộc tính nào không dành riêng cho kịch bản là một phương pháp lỗi thời của HTML. Mặc dù về mặt kỹ thuật, nó vẫn hoạt động, bạn vẫn gán các thuộc tính javascript cho thuộc tính không phải là tập lệnh, đây không phải là thông lệ tốt. Nó thậm chí có thể thất bại trên các trình duyệt cũ, hoặc thậm chí một số trình duyệt hiện đại (một bài đăng trên diễn đàn bị cho là dường như cho thấy Opera không thích 'javascript:' url).

Một cách thực hành tốt hơn sẽ là cách thứ hai, để đưa javascript của bạn vào onclickthuộc tính, được bỏ qua nếu không có chức năng tạo tập lệnh. Đặt một URL hợp lệ trong trường href (thường là '#') để dự phòng cho những người không có javascript.

nó hoạt động với tôi bằng cách sử dụng dòng mã này:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Những công việc này

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Cá nhân, tôi thấy việc đặt các cuộc gọi javascript vào thẻ HREF gây phiền nhiễu. Tôi thường không thực sự chú ý đến việc có hay không một liên kết javascript hay không và thường muốn mở mọi thứ trong một cửa sổ mới. Khi tôi thử làm điều này với một trong những loại liên kết này, tôi nhận được một trang trống không có gì trên đó và javascript trong thanh vị trí của tôi. Tuy nhiên, điều này được bỏ qua một chút bằng cách sử dụng một onlick.

Một điều nữa mà tôi nhận thấy khi sử dụng "href" với javascript:

Tập lệnh trong thuộc tính "href" sẽ không được thực thi nếu chênh lệch thời gian giữa 2 lần nhấp là khá ngắn.

Ví dụ: thử chạy ví dụ sau và nhấp đúp chuột (nhanh!) Trên mỗi liên kết. Liên kết đầu tiên sẽ được thực hiện chỉ một lần. Liên kết thứ hai sẽ được thực hiện hai lần.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Đã sao chép trong Chrome (nhấp đúp chuột) và IE11 (với ba lần nhấp). Trong Chrome nếu bạn nhấp đủ nhanh, bạn có thể thực hiện 10 lần nhấp và chỉ thực hiện 1 chức năng.

Firefox hoạt động tốt.

Đầu tiên, có url trong hreflà tốt nhất vì nó cho phép người dùng sao chép liên kết, mở trong một tab khác, v.v.

Trong một số trường hợp (ví dụ: các trang web có thay đổi HTML thường xuyên), việc liên kết các liên kết mỗi khi có cập nhật là không thực tế.

Phương pháp ràng buộc điển hình

Liên kết bình thường:

<a href="https://www.google.com/">Google<a/>

Và một cái gì đó như thế này cho JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Lợi ích của phương pháp này là phân tách rõ ràng đánh dấu và hành vi và không phải lặp lại các lệnh gọi hàm trong mỗi liên kết.

Phương pháp không ràng buộc

Tuy nhiên, nếu bạn không muốn liên kết mọi lúc, bạn có thể sử dụng onclick và truyền vào phần tử và sự kiện, ví dụ:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

Và cái này cho JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Lợi ích của phương pháp này là bạn có thể tải các liên kết mới (ví dụ qua AJAX) bất cứ khi nào bạn muốn mà không phải lo lắng về việc ràng buộc mỗi lần.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Tôi đã trải nghiệm rằng javascript: hrefs không hoạt động khi trang được nhúng trong tính năng trang web của Outlook nơi thư mục thư được đặt thành thay vào đó hiển thị một url