onmouseout không được kích hoạt khi phần tử biến mất

Question

Tôi có sự kiện di chuột kích hoạt chú giải công cụ; Tôi muốn chú giải công cụ này biến mất khi chuột bị xóa. onmouseout hoạt động tốt, ngoại trừ khi phần tử biến mất.

Dưới đây là một ví dụ cất trong đó sử dụng nền thay đổi thay vì tooltips (do đó bạn có thể dễ dàng chạy nó):

<div id="bar"> 
    <div onmouseover="document.bgColor='gray'" onmouseout="document.bgColor='white'" style="border:1px solid black;"> 
    <span onclick="document.getElementById('bar').innerHTML = ''">Remove me</span> 
    </div> 
</div> 

Vấn đề là thế này: khi tôi bấm vào nút "Xóa tôi", con chuột của tôi không còn "over" div, nhưng onmouseout không kích hoạt, bởi vì nó đã biến mất. Những gì tôi muốn là cho ví dụ này để hoàn nguyên về nền trắng khi tôi nhấp vào "Xóa tôi".

Có một giải pháp hiển nhiên mà tôi muốn tránh. Tôi không muốn trình xử lý onclick xóa phần tử đó để "sửa" tài liệu theo cách thủ công. Điều này là do có thể có nhiều trình xử lý tùy ý có thể loại bỏ div với onmouseout. Nói chung, tất cả trình xử lý loại bỏ và loại bỏ chuột có thể được tạo động và cần phải biết về nhau. Để phức tạp hơn nữa, tôi có thể có một trường hợp các phần tử có thể tháo rời được lồng vào nhau, và bất kỳ phần tử nào có thể bị loại bỏ. (Tôi có thể có thể loại bỏ hạn chế này, nhưng nó sẽ mất một công việc ít.)

---

Dưới đây là một ví dụ về một giải pháp mà có thể làm việc: khi rê chuột, đăng ký đối thoại modal là "tích cực"; sau đó bất cứ khi nào các phần tử được xóa, hãy lặp lại tất cả các cuộc đối thoại phương thức và tìm kiếm các đối tượng không còn trong tài liệu. Nhưng điều này đòi hỏi tôi phải giữ một kho lưu trữ toàn cầu đối thoại, và cần có thời gian O (n * m), trong đó n là số lượng các cuộc đối thoại đang hoạt động, và m là cách lồng nhau sâu sắc đối thoại trong DOM. Hơn nữa, tôi cần phải chạy hoạt động này bất cứ khi nào tôi loại bỏ các yếu tố, ngay cả khi nó là khá rõ ràng không có gì bị ảnh hưởng. Dưới đây là một giải pháp có thể hoạt động: nếu bạn có thể thực hiện một sự kiện onremovedfromdocument, thì chúng ta chỉ cần copy handler onmouseout là sự kiện onremovedfromdocument, và ví dụ này cũng sẽ hoạt động chính xác. (Tôi nghe jQuery có thể hỗ trợ điều này, nhưng tôi cần phải tương thích với mã không phải jQuery.)

Đây là một giải pháp khả thi khác: yêu cầu mỗi cuộc đối thoại phương thức lặp lại nhiều lần để xem liệu cha mẹ của nó có nằm trong tài liệu hay không. Khi không, phải có cam kết. Nhưng bỏ phiếu thực sự là xấu. (Tôi đoán tôi sẵn sàng làm điều này nếu không có gì tốt hơn!)

Đây là một ý tưởng khác: sử dụng tính năng chụp sự kiện để cho phép yếu tố onmouseout nắm bắt yếu tố nhấp trước và thiết lập bộ hẹn giờ để kiểm tra xem nó có còn trong tài liệu sau khi nhấp chuột xong.

---

Để tham khảo, đây là những gì tôi thực sự cố gắng làm: Tôi có tiện ích JS tạo cấu trúc cây phức tạp. Nhiều chỉnh sửa cho tiện ích liên quan đến việc nhấp vào một số nút trong cây, sau đó thêm hoặc xóa từ cây (có thể xóa chính nó). Tuy nhiên, một số nút cần các thủ tục chỉnh sửa phức tạp hơn, vì vậy tôi muốn hiển thị chú giải công cụ với các hướng dẫn và các nút có thể khác khi người dùng di chuột qua họ hoặc thậm chí là giữ cuộc đối thoại xung quanh nếu người dùng nhấp vào họ. Nhưng người dùng có thể thay đổi quyết định của mình và quyết định xóa nút hoặc bất kỳ nút cha nào của nút, trong trường hợp đó, cuộc hội thoại sẽ biến mất. Bạn có thể xem thực hiện những gì tôi hiện đang có here, nơi các cuộc đối thoại được tạo theo cách thủ công. Tôi muốn bắt đầu sử dụng một thư viện tooltip đẹp, nhưng tất cả chúng đều có lỗi mà tôi đã mô tả ở trên.

Answer 1

thử:

<script> 
    var liveToolTip = new Array(); 
    function addLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
     }else{ 
      liveToolTip[elName]=1;} 
    } 
    function removeLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
      delete liveToolTip[elName]; 
     } 
    } 
    function runOnMouseOuts() { 
     for(mouseOut in liveToolTip) { 
      document.getElementById(mouseOut).onmouseout(); 
     } 
    } 
</script> 
<div id="bar"> 
    <div onmouseover="addLiveToolTip(this.id);document.bgColor='gray'" 
     onmouseout="removeLiveToolTip(this.id);document.bgColor='white'" style="border:1px solid black;" id="foo"> 
     <span onclick="document.getElementById('bar').innerHTML = '';runOnMouseOuts()"> 
     Remove me</span> 
    </div> 

Answer 2

Trên các trình duyệt hiện đại, có sự kiện DOMNodeRemoved. Vì vậy:

var div = document.getElementsByTagName('div')[0]; 
div.addEventListener('DOMNodeRemoved', function(e){ 
    document.bgColor='white'; 
});​ 

http://jsfiddle.net/HX88L/

Điều tệ hại là, sự kiện đó đã deprecated. Việc thay thế cho cái gọi là mutation events không giống như đã sẵn sàng để sử dụng. Trang tài liệu MDN vẫn chỉ là stub.