Cách giữ các thuộc tính di chuột trong khi tắt nhấp chuột

Question

Vì vậy, tôi có danh sách này với một số hiệu ứng di chuột được thêm thông qua CSS. HTML:

<li><a href="#">Current Period</a> 
    <ul> 
     <li><a href="#">2012</a> 
     <li> a href="#">2011</a> //...you get the point 

CSS:

#nav a:hover { 
    background-color: #fff; 
    color: #333; 
} 

Khi người dùng di chuột qua giai đoạn hiện nay một danh sách các trẻ em yếu tố xuất hiện (2012, 2011 ... mà có con của riêng mình). Vấn đề của tôi là người dùng có thể nhấp vào "Thời kỳ hiện tại". Tôi đã cố gắng loại bỏ các nhấp chuột bằng cách thêm một lớp học để neo như sau:

<li><a href="#" class="noclick">Current Period</a> .... 

CSS:

.noclick { pointer-events: none; cursor: default; }

nhưng điều này dĩ nhiên loại bỏ các tính năng di chuột. Tôi muốn giữ hiệu ứng di chuột trong khi làm cho nút không thể nhấp (tôi đã suy nghĩ javascript, nhưng tôi muốn có một giải pháp "trực tiếp" hơn). Tôi đánh giá cao bất kỳ trợ giúp nào :)

Answer 1

Trong thử nghiệm xử lý nhấp chuột của bạn cho dù mục nhấp có lớp rằng:

$("#nav a").click(function(e){ 
    if ($(e.target).hasClass("noclick")) 
     return false; 

    // your other code here 
}); 

Lưu ý rằng bằng cách kiểm tra target element cho sự kiện bạn không thì hãy ngăn liếm trên các yếu tố con từ làm việc.

Hoặc nếu lớp "noclick" không được thay đổi động, tức là, các liên kết "noclick" đó bắt đầu bằng và sẽ luôn là "noclick", bạn có thể thay đổi công cụ chọn để trình xử lý nhấp của bạn không bị ràng buộc với các yếu tố cụ thể đó:

$("#nav a").not(".noclick").click(function() { ... 

Answer 2

Bạn đã thử chưa?

$('.noclick').unbind('click'); 

hoặc

$('.noclick').click(function(e){e.preventDefault();}); 

hoặc

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

Answer 3

Bạn có thể sử dụng lớp noClick để ngăn chặn các sự kiện mặc định

('.noclick').on('click' , function(e) { 
    e.preventDefault(); 
}); 

Answer 4

Chỉ cần thay đổi dòng sau của bạn:

<li><a href="#" class="noclick">Current Period</a> .... 

cho điều này một

<li><a href="#" class="noclick" onclick="return false;">Current Period</a> .... 

và thay đổi css sau đây của bạn:

.noclick { pointer-events: none; cursor: default; } 

cho điều này một

.noclick { cursor: default; } 

rằng nên làm những gì bạn muốn.

Answer 5

trên lớp .noclick loại bỏ con trỏ-sự kiện

.noclick { cursor: default; } 

và thêm js để .noclick yếu tố

$('.noclick').each(function() { 
    var $this = $(this); 
    $this.hover(function() { 
     // do something... 
    }); 
    $this.click(function() { 
     return false; 
    }); 
});