Javascript: Nhiều sự kiện mouseout kích hoạt

Question

Tôi biết về các mô hình sự kiện khác nhau trong Javascript (mô hình WC3 so với mô hình Microsoft), cũng như sự khác biệt giữa bong bóng và chụp. Tuy nhiên, sau một vài giờ đọc các bài viết khác nhau về vấn đề này, tôi vẫn không chắc chắn cách mã đúng hành vi dường như đơn giản sau đây:

Nếu tôi có một bên ngoài div và phần tử bên trong div, tôi muốn một con chuột- sự kiện được kích hoạt khi chuột rời khỏi div ngoài. Khi chuột di chuyển từ bên trong-div sang bên ngoài-div, không có gì xảy ra, và khi chuột di chuyển từ bên ngoài-div đến inner-div thì không có gì xảy ra. Sự kiện chỉ nên chỉ cháy nếu chuột di chuyển từ bên ngoài-div đến trang xung quanh.

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" > 
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div> 
</div> 

Bây giờ, nếu tôi đặt "mouseout" sự kiện trên outer-div, hai sự kiện mouseout được kích hoạt khi di chuyển chuột từ nội div để trang xung quanh, bởi vì sự kiện cháy một khi chuột di chuyển từ trong ra ngoài, và sau đó lại di chuyển từ bên ngoài sang trang xung quanh.

Tôi biết tôi có thể hủy sự kiện bằng cách sử dụng ev.stopPropagation(), vì vậy tôi đã thử đăng ký trình xử lý sự kiện với bên trong-div để hủy sự kiện tuyên truyền. Tuy nhiên, điều này sẽ không ngăn sự kiện kích hoạt khi chuột di chuyển từ bên ngoài-div sang bên trong-div.

Vì vậy, trừ khi tôi nhìn thấy một cái gì đó, có vẻ như với tôi hành vi này không thể thực hiện được nếu không có các hàm theo dõi chuột phức tạp. Trong tương lai, tôi dự định sẽ thực hiện lại rất nhiều mã này bằng cách sử dụng một khung nâng cao hơn, như JQuery, nhưng hiện tại, tôi tự hỏi liệu có cách đơn giản để thực hiện hành vi trên trong Javascript thông thường hay không.

Answer 1

Sự kiện mouseout trên div ‘bong bóng’ bên trong vào div bên ngoài. Để phát hiện rằng điều này đã xảy ra từ div bên ngoài, kiểm tra target tài sản của event:

<div id="outer"> 
    <div id="inner">x</div> 
</div> 

document.getElementById('outer').onmouseout= function(event) { 
    // deal with IE nonsense 
    if (event===undefined) event= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 

    if (target!==this) return; 
    ... 
}; 

Vấn đề thông thường với mouseout là bạn nhận được nó khi di chuyển con trỏ “out” của phụ huynh ngay cả khi nó chỉ chuyển động "vào" cho đứa trẻ. Bạn có thể phát hiện trường hợp này bằng tay bằng cách nhìn lên danh sách tổ tiên của phần tử con chuột được di chuyển vào:

var other= 'relatedTarget' in event? event.relatedTarget : event.toElement; 
    while ((other= other.parentNode).nodeType===1) 
     if (other===this) return; 

Đây là mô hình mousein/mouseout: nó chỉ là quan tâm về yếu tố nào là cha mẹ trực tiếp của chuột. Những gì bạn thường muốn là mô hình mouseenter/mouseleave, xem xét toàn bộ cây nguyên tố, vì vậy bạn chỉ nhận được mouseleave khi con trỏ rời khỏi phần tử hoặc con cháu của nó và không di chuyển trực tiếp vào phần tử hoặc con cháu của nó.

Thật không may mouseenter/mouseleave hiện là cặp sự kiện chỉ dành cho IE. Hy vọng rằng các trình duyệt khác sẽ chọn nó vì nó được mong đợi là một phần của Sự kiện DOM Cấp 3.