1、什么是冒泡事件?
事件冒泡就是父元素和子元素有相同的事件,当触发子元素时,会向上冒泡,同时也会触发父元素
简单的鼠标移动事件:
进入
代码如下:
mouseenter:不冒泡
mouseover: 冒泡
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件
移出
代码如下:
mouseleave: 不冒泡
mouseout:冒泡
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
componentDidMount() {
// 执行监听
const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
// 鼠标移出时触发,不冒泡
navContainerDom.addEventListener("mouseleave", (e) => {
console.log("dragleave事件触发");
navContainerDom.style.display = "none";
})
}
// 移出监听
componentWillUnmount() {
const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
navContainerDom.addEventListener("mouseleave", (e) => {
console.log("dragleave事件触发");
navContainerDom.style.display = "none";
})
}
//点击图标
/** 显示菜单 */
showMenu = () => {
const navContainerDom = document.querySelector(".nav-container") as HTMLImageElement;
navContainerDom.style.display = "flex";
}