Tại sao sự kiện mouseenter/mouseleave kích hoạt khi nhập/rời các phần tử con trong SVG?

Question

Tôi có một SVG, bên trong có nhiều SVG hơn với một số biến của các phần tử rect bên trong chúng, tất cả được tạo ra từ một đối tượng dữ liệu. Dưới đây là hệ thống phân cấp chung:

<svg class="parent-svg"> 
    <svg class="child-svg"> 
     <rect /> 
     <rect /> 
    </svg> 
    <svg class="child-svg"> 
     <rect /> 
     <rect /> 
    </svg> 
</svg> 

Tôi đã bị ràng buộc mouseenter/sự kiện MouseLeave đến .child-svg yếu tố, nhưng tôi thấy rằng các sự kiện được bắn khi con chuột của tôi đi vào khoảng trắng ở giữa <rect> yếu tố. Sự hiểu biết của tôi về mouseenter/mouseleave là chúng không nên kích hoạt khi con trỏ vào/rời khỏi các phần tử con - điều này có vẻ như hành vi bạn mong đợi từ di chuột qua/mouseout. Và tất nhiên, những gì tôi muốn lý tưởng là dành cho các sự kiện mouseenter/mouseleave chỉ để kích hoạt khi tôi đã rời khỏi mỗi phần (mà tôi đã mô tả bằng cách sử dụng màu sắc).

Đây là fiddle liên quan: http://jsfiddle.net/ysim/yVfuK/4/

Edit: tôi đã cố gắng đưa ra các .child-svg yếu tố một chiều cao và chiều rộng, nhưng điều đó dường như không làm việc một trong hai: http://jsfiddle.net/ysim/gMXuU/3

Edit: Đây là fiddle với giải pháp, được sửa theo đề xuất của @ pornel: http://jsfiddle.net/ysim/HUHAQ/

Cảm ơn!

Answer 1

Tôi đoán là .child-svg không có bất kỳ khu vực nào, vì vậy không có cách nào để di chuột trực tiếp. Khi chuột rời khỏi <rect>, nó cũng rời khỏi .child-svg.

SVG không có bố cục luồng, vì vậy, trẻ em không ảnh hưởng đến kích thước của phần tử gốc.

---

Dưới đây là giải pháp: http://jsfiddle.net/gMXuU/4/

• thêm một <rect> mà không có điền như nền
• thêm pointer-events:all để làm yếu tố vô hình "nhìn thấy" để con trỏ chuột