在前端开发中，drag and drop（拖放）功能是非常常见的交互方式之一。而其中的dragleave事件，在拖动元素移出某个容器时触发，可以帮助我们实现更加复杂的拖放交互效果。不过，当拖动元素在容器内部的子元素上移动时，我们需要特别注意dragleave事件的触发机制。
dragleave事件的基本用法
dragleave事件是指鼠标或手指在拖动元素离开某个容器的边缘时，触发该容器上的事件。通过监听该事件，我们可以实现一些鼠标悬停以及拖动时的动态效果。以下是一个简单的示例代码：
---- -------------- ----------------------------------- ------------------------------------- ---- -------------------- ------ -------- -------- ---------------------- - ---------------------------------------- - ---------
以上代码中，我们在#container元素上绑定了两个事件：ondragover和ondragleave。其中ondragover用于防止默认的拖拽行为，ondragleave则会在拖动元素离开#container时触发。在handleDragLeave函数中，我们移除了event.target（即#container）的active类名，以实现一个简单的动态效果。
dragleave事件在子元素中的应用
但是，当拖动元素在容器内部的子元素上移动时，dragleave事件不会触发。具体来说，在进入子元素时，会先触发该子元素上的dragenter事件，然后再离开时触发dragleave事件。这意味着，如果我们要监听整个容器中拖动元素的移动，就需要在每个子元素上都绑定一次dragleave事件。以下是一个示例代码：
---- -------------- ----------------------------------- ------------------------------------- ---- ----------------------- ---- ------------------------- ------ -------- ----- ---------- - ------------------------------------ ------------------------- -- - ---------------------------------- ----------------- ---------------------------------- ----------------- --- -------- ---------------------- - ------------------------------------- - -------- ---------------------- - ---------------------------------------- - ---------
以上代码中，我们首先使用querySelectorAll方法选取了所有.inner子元素，并分别在它们上面绑定了dragenter和dragleave事件。当鼠标或手指拖动元素进入某个.inner子元素时，会触发handleDragEnter函数，为该子元素添加active类名；当拖动元素离开该子元素时，会触发handleDragLeave函数，移除该子元素的active类名。这样，就能在整个容器内部监听到拖动元素的移动。
注意事项
需要注意的是，在绑定dragleave事件时，我们不能直接将事件处理函数写在子元素上，而需要写在父元素上，并使用event.target获取当前实际触发事件的元素。例如：
---- -------------- ----------------------------------- ------------------------------------- ---- ----------------------- ---- ------------------------- ------ -------- ----- ------------- - ------------------------------------- ------------------------------------------- ----------------- ------------------------------------------- ----------------- -------- ---------------------- - - ---------------------------------------------------------- -------- -------------------------------------------------------------------------------------