Hiệu quả của việc thêm 'return false' cho người nghe sự kiện nhấp chuột là gì?

Nhiều lần tôi đã thấy các liên kết như thế này trong các trang HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Có tác dụng gì return falsetrong đó?

Ngoài ra, tôi thường không thấy điều đó trong các nút.

Điều này được chỉ định ở bất cứ đâu? Trong một số thông số trong w3.org?

Giá trị trả về của trình xử lý sự kiện xác định liệu hành vi trình duyệt mặc định có xảy ra hay không. Trong trường hợp nhấp vào liên kết, điều này sẽ theo liên kết, nhưng sự khác biệt là đáng chú ý nhất trong trình xử lý gửi biểu mẫu, trong đó bạn có thể hủy gửi biểu mẫu nếu người dùng đã nhầm lẫn khi nhập thông tin.

Tôi không tin có một đặc điểm kỹ thuật của W3C cho việc này. Tất cả các giao diện JavaScript cổ như thế này đã được đặt biệt danh "DOM 0" và hầu hết không được chỉ định. Bạn có thể gặp may mắn khi đọc tài liệu cũ của Netscape 2.

Cách hiện đại để đạt được hiệu ứng này là gọi event.preventDefault()và điều này được chỉ định trong đặc tả Sự kiện DOM 2 .

Bạn có thể thấy sự khác biệt với ví dụ sau:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Nhấp vào "Okay" trả về true và liên kết được theo dõi. Nhấp vào "Hủy" trả về sai và không theo liên kết. Nếu javascript bị vô hiệu hóa, liên kết được theo dõi bình thường.

Đây là một thói quen mạnh mẽ hơn để hủy bỏ hành vi mặc định và sự kiện sủi bọt trong tất cả các trình duyệt:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Một ví dụ về cách điều này sẽ được sử dụng trong xử lý sự kiện:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

GÌ "trở lại false" thực sự đang làm gì?

return false thực sự đang làm ba việc rất riêng biệt khi bạn gọi nó:

1. event.preventDefault ();
2. event.stopPropagation ();
3. Dừng thực hiện gọi lại và trả về ngay lập tức khi được gọi.

Xem jquery-event-stop-misuse-return-false để biết thêm thông tin.

Ví dụ :

Trong khi nhấp vào liên kết này, trả về false sẽ hủy hành vi mặc định của trình duyệt .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Trả lời sai từ một sự kiện JavaScript thường hủy bỏ hành vi "mặc định" - trong trường hợp liên kết, nó báo cho trình duyệt không theo liên kết.

Tôi tin rằng nó gây ra sự kiện tiêu chuẩn không xảy ra.

Trong ví dụ của bạn, trình duyệt sẽ không cố gắng đi đến #.

Trả về false sẽ dừng siêu liên kết được theo dõi sau khi javascript đã chạy. Điều này hữu ích cho các javascript không phô trương làm suy giảm một cách duyên dáng - ví dụ: bạn có thể có một hình ảnh thu nhỏ sử dụng javascript để mở một cửa sổ bật lên của hình ảnh có kích thước đầy đủ. Khi javascript bị tắt hoặc hình ảnh được nhấp vào giữa (được mở trong tab mới), điều này sẽ bỏ qua sự kiện onClick và chỉ mở hình ảnh dưới dạng hình ảnh kích thước đầy đủ thông thường.

Nếu trả về false không được chỉ định, hình ảnh sẽ khởi động cửa sổ bật lên và mở hình ảnh bình thường. Một số người thay vì sử dụng return false sử dụng javascript làm thuộc tính href, nhưng điều này có nghĩa là khi javascript bị vô hiệu hóa, liên kết sẽ không làm gì cả.

sử dụng return false trong một sự kiện onclick sẽ ngăn trình duyệt xử lý phần còn lại của ngăn xếp thực thi, bao gồm theo liên kết trong thuộc tính href.

Nói cách khác, việc thêm return false sẽ ngăn href hoạt động. Trong ví dụ của bạn, đây chính xác là những gì bạn muốn.

Trong các nút, không cần thiết vì onclick là tất cả những gì nó sẽ thực hiện - không có href để xử lý và đi đến.

Trả về false là nói không thực hiện hành động mặc định, trong trường hợp của an <a href>là theo liên kết. Khi bạn trả về false cho onclick, thì href sẽ bị bỏ qua.

Hack trình duyệt: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Trả về false sẽ ngăn điều hướng. Nếu không, vị trí sẽ trở thành giá trị trả về của someFunc

Việc return falsengăn trang bị điều hướng và cuộn không mong muốn của một cửa sổ lên trên cùng hoặc dưới cùng.

onclick="return false"

Tôi ngạc nhiên rằng không ai đề cập đến onmousedownthay vì onclick. Các

onclick='return false'

không bắt được hành vi mặc định của trình duyệt dẫn đến việc lựa chọn văn bản (đôi khi không mong muốn) xảy ra cho mousedownnhưng

onmousedown='return false'

làm.

Nói cách khác, khi tôi nhấp vào nút, văn bản của nó đôi khi được chọn vô tình thay đổi giao diện của nút, điều đó có thể không mong muốn. Đó là hành vi mặc định mà chúng tôi đang cố gắng ngăn chặn ở đây. Tuy nhiên, mousedownsự kiện đã được đăng ký trước đó click, vì vậy nếu bạn chỉ ngăn chặn hành vi đó bên trong clicktrình xử lý của mình , nó sẽ không ảnh hưởng đến lựa chọn không mong muốn phát sinh từ mousedownsự kiện. Vì vậy, văn bản vẫn được chọn. Tuy nhiên, ngăn chặn mặc định cho mousedownsự kiện sẽ thực hiện công việc.

Xem thêm event.preventDefault () so với return false

Tôi có liên kết này trên trang HTML của mình:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

Hàm setBodyHtml () được định nghĩa là:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Khi tôi nhấp vào liên kết, liên kết sẽ biến mất và văn bản hiển thị trong trình duyệt sẽ thay đổi thành "nội dung mới".

Nhưng nếu tôi xóa "sai" khỏi liên kết của mình, nhấp vào liên kết đó (dường như) không có gì. Tại sao vậy?

Đó là bởi vì nếu tôi không trả lại sai, hành vi mặc định của việc nhấp vào liên kết và hiển thị trang đích của nó sẽ không bị hủy. NHƯNG, ở đây, href của siêu liên kết là "" để nó liên kết trở lại trang hiện tại CÙNG. Vì vậy, trang này chỉ được làm mới một cách hiệu quả và dường như không có gì xảy ra.

Trong nền, hàm setBodyHtml () vẫn được thực thi. Nó gán đối số của nó cho body.innerHTML. Nhưng vì trang được làm mới / tải lại ngay lập tức nên nội dung đã sửa đổi không hiển thị trong hơn một vài phần nghìn giây, vì vậy tôi sẽ không nhìn thấy nó.

Ví dụ này cho thấy tại sao đôi khi HỮU ÍCH khi sử dụng "return false".

Tôi muốn gán SOME href cho liên kết, để nó hiển thị dưới dạng liên kết, dưới dạng văn bản được gạch chân. Nhưng tôi không muốn nhấp vào liên kết để tải lại trang một cách hiệu quả. Tôi muốn điều hướng mặc định = hành vi bị hủy và bất kỳ tác dụng phụ nào gây ra bằng cách gọi chức năng của tôi để thực hiện và duy trì hiệu lực. Vì vậy, tôi phải "trả lại sai".

Ví dụ trên là thứ bạn sẽ nhanh chóng thử trong quá trình phát triển. Để sản xuất, nhiều khả năng bạn sẽ chỉ định một trình xử lý nhấp chuột trong JavaScript và thay vào đó gọi hàm notifyDefault (). Nhưng để dùng thử nhanh, "return false" ở trên thực hiện thủ thuật.

Khi sử dụng biểu mẫu chúng tôi có thể sử dụng 'return false' để ngăn gửi.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>