Làm cách nào để tắt HREF nếu onclick được thực thi?

Tôi có một mỏ neo với cả hai HREF và ONCLICKthuộc tính được đặt. Nếu được nhấp và Javascript được bật, tôi muốn nó chỉ thực thi ONCLICKvà bỏ qua HREF. Tương tự như vậy, nếu Javascript bị vô hiệu hóa hoặc không được hỗ trợ, tôi muốn nó đi theo HREFURL và bỏ qua ONCLICK. Dưới đây là một ví dụ về những gì tôi đang làm, sẽ thực thi JS và theo liên kết đồng thời (thường JS được thực thi và sau đó trang thay đổi):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

cách tốt nhất để làm điều này là gì?

Tôi hy vọng một câu trả lời về Javascript, nhưng tôi sẽ chấp nhận bất kỳ phương pháp nào miễn là nó hoạt động, đặc biệt nếu điều này có thể được thực hiện với PHP. Tôi đã đọc " trang thực thi và chuyển hướng liên kết a href trước khi hàm onclick của javascript có thể kết thúc " rồi, nhưng nó chỉ trì hoãn HREFchứ không vô hiệu hóa hoàn toàn. Tôi cũng đang tìm kiếm thứ gì đó đơn giản hơn nhiều.

Bạn có thể sử dụng giải pháp chưa được chỉnh sửa đầu tiên, nếu bạn đặt return đầu tiên trong onclickthuộc tính:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Ví dụ: https://jsfiddle.net/FXkgV/289/

    yes_js_login = function() {
         // Your code here
         return false;
    }

Nếu bạn trả về false, nó sẽ ngăn hành động mặc định (chuyển đến href).

Chỉnh sửa: Rất tiếc, cách này dường như không hiệu quả, bạn có thể làm như sau:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

Chỉ cần vô hiệu hóa hành vi mặc định của trình duyệt bằng cách sử dụng preventDefaultvà chuyển vào eventtrong HTML của bạn.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

<a href="http://www.google.com" class="ignore-click">Test</a>

với jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

với JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

Bạn chỉ định lớp .ignore-clickcho bao nhiêu phần tử bạn thích và nhấp chuột vào những phần tử đó sẽ bị bỏ qua

Bạn có thể sử dụng mã đơn giản này:

<a href="" onclick="return false;">add new action</a><br>

Sẽ đơn giản hơn nếu bạn truyền một tham số sự kiện như sau:

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

Điều này có thể giúp. Không cần JQuery

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

Mã này thực hiện những việc sau: Chuyển liên kết tương đối đến Trình xem Google Tài liệu

1. Nhận phiên bản liên kết đầy đủ của anchor bằng cách this.href
2. mở liên kết cửa sổ mới.

Vì vậy, trong trường hợp của bạn, điều này có thể hoạt động:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

Tôi đã giải quyết một tình huống trong đó tôi cần một mẫu cho phần tử sẽ xử lý thay thế URL thông thường hoặc lệnh gọi javascript, trong đó hàm js cần tham chiếu đến phần tử đang gọi. Trong javascript, "this" hoạt động như một tự tham chiếu chỉ trong ngữ cảnh của một phần tử biểu mẫu, ví dụ: một nút. Tôi không muốn có một nút, chỉ là sự xuất hiện của một liên kết thông thường.

Ví dụ:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Thuộc tính href và onClick có cùng giá trị, tôi nên thêm "return false" vào onClick khi đó là một lệnh gọi javascript. Có "return false" trong hàm được gọi không hoạt động.

Điều này đã làm việc cho tôi:

<a href="" onclick="return false;">Action</a>

Trong trường hợp của tôi, tôi gặp điều kiện khi người dùng nhấp vào phần tử "a". Điều kiện là:

Nếu phần khác có nhiều hơn mười mục, thì người dùng sẽ không được chuyển hướng đến trang khác.

Nếu phần khác có ít hơn mười mục, thì người dùng sẽ được chuyển hướng đến trang khác.

Chức năng của các phần tử "a" phụ thuộc vào thành phần khác. Mã trong sự kiện nhấp chuột như sau:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}