Làm cách nào tôi có thể có sự kiện di chuột qua đối với phần tử con nếu phần tử gốc cũng có chuột di chuột?

Question

Tôi có một vùng "trợ giúp" trên trang của tôi và bất cứ khi nào người dùng di chuột qua một bảng, thông tin trợ giúp sẽ được cập nhật. Vấn đề nằm trong bảng tôi có một hộp kiểm trong 1 ô của mỗi hàng và khi người dùng di chuột qua hộp kiểm đó, tôi muốn sự kiện di chuột qua hộp kiểm để ghi đè sự kiện bảng và hộp kiểm trợ giúp được hiển thị. Hiện tại, việc di chuyển bảng hoạt động tốt nhưng không có gì xảy ra khi tôi di chuột qua hộp kiểm.

<table class="myTable"> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

<div class="myHelpMenu"></div> 


$('.myCheckbox').mouseover(function() { 
    $('.myHelpMenu').html("this is my checkbox help"); 
}); 

$('.myTable').mouseover(function() { 
    $('.myHelpMenu').html("this is my tables help"); 
}); 

Answer 1

LIVE DEMO

Đây là một cách tốt đẹp để phát hiện sử dụng mouseover các target yếu tố hiện đang dao động, vì sử dụng tinh khiết JS để lấy .tagName bạn có thể tạo một điệp danh sách đối tượng và lấy cái mong muốn.

$('.myTable').mouseover(function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

}); 

---

Nếu bạn muốn xóa thông điệp thông tin của bạn làm thích:

$('.myTable').on('mouseover mouseleave',function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

    if(e.type=='mouseleave') 
    $('.myHelpMenu').empty(); 

}); 

Answer 2

Kể từ khi mouseover cho bảng là dành cho toàn bộ khu vực, chỉ cần gọi mouseenter để thay thế. Sau đó, bạn có thể thêm mouseout để reupdate sau khi họ rời khỏi bảng.

Answer 3

Có vẻ như bạn muốn di chuột qua quá trình truyền dừng hộp kiểm đến bảng?

Nếu có, điều này sẽ thực hiện.

$('.myCheckbox').mouseover(function(e) { 
    $('.myHelpMenu').html("this is my checkbox help"); 
    e.stopPropagation(); 
});