ngăn chặnDefault () trên thẻ <a>

133

Tôi có một số HTML và jQuery trượt divlên xuống để hiển thị hoặc ẩn nó khi nhấp vào liên kết:

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

Câu hỏi của tôi là: Làm cách nào để sử dụng preventDefault()để ngăn liên kết hoạt động như một liên kết và thêm "#" vào cuối URL của tôi và nhảy lên đầu trang?

Tôi không thể tìm ra cú pháp đúng, tôi chỉ nhận được một lỗi nói

ngăn chặnDefault () không phải là một hàm.

javascript jquery

— Chris J Allen
nguồn

194

Hãy thử một cái gì đó như:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Đây là trang về điều đó trong tài liệu jQuery

— Davide Gualano
nguồn

53

Đặt hrefthuộc tính làhref="javascript:;"

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>

— Musaddiq Khan
nguồn

Đá quý nhỏ đẹp cho neo - cảm ơn! Bất cứ ai có thể mô tả tại sao điều này làm việc?

— justinpage

8

hrefThuộc tính @KLVTZ của thẻ neo ( a) có thể không trống ... Nhưng chúng ta có thể đặt nó thành javascript:<code-here>, đó là hợp pháp / hợp lệ. Sau đó chúng tôi nhập vào cho <code-here>một tuyên bố trống bằng cách thêm dấu chấm phẩy. Bằng cách này, liên kết không làm gì cả.

— Stijn de Witt

1

Cảm ơn rất nhiều! Điều này cho phép tôi thực hiện chức năng nút quay lại (ghi nhớ trạng thái được thiết lập bởi PushState () trên các trang) vào mẩu bánh mì của CalePHP như thế này $ this-> Html-> addCrumb ('Phiên', 'javascript: window.history.back (); ');

— Bảo trợ

38

Chúng tôi khuyên bạn không nên sử dụng return falsevì có 3 điều xảy ra:

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

Vì vậy, trong loại tình huống này, bạn thực sự chỉ nên sử dụng event.preventDefault();

Lưu trữ bài viết - Sự kiện jQuery: Dừng (Mis) Sử dụng Return false

— Ryan
nguồn

13

Ngoài ra, bạn chỉ có thể trả về false từ sự kiện nhấp chuột:

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

Điều này sẽ ngăn A-Href được kích hoạt.

Tuy nhiên, xin lưu ý, vì lý do khả năng sử dụng, trong một thế giới lý tưởng mà href vẫn nên đi đâu đó, cho những người muốn mở liên kết trong tab mới;)

— Kent Fredric
nguồn

1

vâng, tôi nghĩ rằng tôi đã trả lời những gì tôi nghĩ ý định của bạn thay vì câu hỏi :)

— Kent Fredric

Để biết giá trị của nó, nhiều năm trước đây đã khuyến khích rằng bạn nên quay lại -1 để ngăn không cho href được kích hoạt. Tôi không nghĩ rằng nó hoạt động trong BẤT K browser trình duyệt nào nữa và bạn phải "trả về false" để ngăn trang nhảy.

— Randy

12

Đây là một giải pháp không phải của JQuery mà tôi vừa thử nghiệm và nó hoạt động.

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>

— Jefrey Bulla
nguồn

12

<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

Sử dụng

javascript: void (0);

— HATCHA
nguồn

@AhmadSharif Tôi đã thử nghiệm trên FF 40.0.3 và IE 11 ngày hôm nay, vẫn còn hoạt động.

— HATCHA

1

Tôi nghĩ void (0) có thể xấu / gây nhầm lẫn cho người dùng, những người có thể nhìn thấy nó khi họ di chuột vào liên kết. Bạn thực sự có thể đặt bất kỳ JS hợp lệ nào, vì vậy tôi muốn đưa ra một nhận xét mô tả những gì nó làm. ví dụhref="javascript:// Send Email"

— colllin

11

Tuy nhiên, một cách khác để làm điều này trong Javascript sử dụng inline onclick, IIFE, eventvà preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— A-Sharabiani
nguồn

Xin chào, hoặc đơn giản<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot

6

Sau vài thao tác, khi trang cuối cùng sẽ chuyển đến liên kết, bạn có thể thực hiện các thao tác sau:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });

— 1 kiểu
nguồn

1

Tại sao phải làm preventDefault, và sau đó tự làm hành động mặc định? Chỉ cần làm những gì bạn cần thêm, và để mặc định vẫn diễn ra.

— nathanvda

5

Tại sao không chỉ làm điều đó trong css?

Loại bỏ thuộc tính 'href' trong thẻ neo của bạn

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

Trong css của bạn,

  a{
    cursor: pointer;
    }

1

Cách này sẽ mất thuộc tính: hover trong các trình duyệt xấu (ví dụ: gia đình)

— Strae

4

Nếu việc ngừng truyền bá sự kiện không làm phiền bạn, chỉ cần sử dụng

return false;

vào cuối xử lý của bạn. Trong jQuery, nó ngăn chặn hành vi mặc định và nó dừng sự kiện sủi bọt.

— bã nhờn
nguồn

4

Bạn có thể sử dụng return false;từ cuộc gọi sự kiện để ngăn chặn sự lan truyền sự kiện, nó hoạt động như một event.preventDefault();phủ định nó. Hoặc bạn có thể sử dụng javascript:void(0)thuộc tính in href để đánh giá biểu thức đã cho rồi quay lại undefinedphần tử.

Trả lại sự kiện khi nó được gọi là:

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

Trường hợp trống:

<a href="javascript:void(0);"> ... </a>

Bạn có thể xem thêm về: Hiệu quả của việc thêm void (0) cho href và 'return false' trên trình nghe sự kiện nhấp của thẻ neo là gì?

— RPichioli
nguồn