Làm cách nào để bỏ qua các sự kiện chuột trên các phần tử con trong jQuery?

Question

Tôi có một danh sách không có thứ tự với các sự kiện di chuột và di chuột được gắn với các phần tử li. Mỗi chứa một liên kết và có một chút đệm trong li. Khi tôi di chuột qua li, sự kiện di chuột sẽ được kích hoạt, nhưng khi tôi di chuột qua liên kết có chứa trong li, việc di chuột qua và các sự kiện di chuột đều được kích hoạt theo thứ tự. Có vẻ như các yếu tố con đang kích hoạt các yếu tố con chuột của họ các sự kiện chuột ... làm thế nào để tôi đi về việc ngăn chặn điều này? Tôi muốn nó ở lại mouseovered khi mousing qua các liên kết, không kích hoạt các hình ảnh động mỗi khi tôi di chuột qua một liên kết. Đây là mã của tôi;

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul> 

Answer 1

Có vẻ như tôi đã tìm thấy câu trả lời cho câu hỏi của riêng mình. Đối với bất kỳ ai có thể có cùng một vấn đề; hãy thử mã này để thay thế. Có vẻ như di chuột không bong bóng thành các phần tử con như các sự kiện chuột khác.

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
); 

Answer 2

Sử dụng các lớp css để phân biệt các cấp menu khác nhau. Sau đó bạn có thể dễ dàng tìm kiếm một lớp hoặc lớp kia trong bộ chọn jQuery của bạn.

Answer 3

Sử dụng "sự kiện stopPropagation()." Để ngăn chặn các sự kiện từ bọt lên:

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 

Ngoài ra sử dụng mouseenter và mouseleave sự kiện thay vì di chuột/out. jQuery bình thường hóa hành vi của họ trên các trình duyệt và những sự kiện này có lợi ích không phải là bong bóng ...

Answer 4

Bạn có thể thử này

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
}); 

Ưu điểm là một cách sử dụng của đoàn sự kiện. Chúc may mắn!

Answer 5

tôi đang tìm kiếm các hành vi equivelant trong JS nơi trong AS3 bạn có thể đặt:

object.mouseenabled = false; 

Con đường tôi thấy rằng hoạt động khá tốt là sử dụng CSS và đưa:

.element { pointer-events: none; } 

(nhưng tôi đoán rằng nó chỉ hoạt động nếu bạn không cần yếu tố gì cả. Tôi sử dụng nó cho các chú giải công cụ bật lên khi di chuột, nhưng không muốn nó hoạt động lạ khi bạn di chuyển chuột đi).