vue中鼠标移入移出事件种类以及区别_外汇行情

迪丽瓦拉

2024-02-21 14:42:04

0次

1.@mouseover与@mouseout

鼠标经过时自身触发事件，其子元素同时也触发该事件。
父亲有的东西，儿子也有，支持冒泡。

适用于鼠标移入移出时子元素也会执行事件的场景，或者单一标签。

鼠标经过时自身触发事件，其子元素不触发该事件。
父亲的东西就是父亲的，儿子没有，不支持冒泡。

适用于鼠标移入移出时该块整体元素只执行一次事件的场景，例如自行封装的多层级组件。

在此我封装了一个模块组件，希望鼠标只在移入组件区域和离开时执行事件，就应当采用@mouseenter与@mouseleave。

父组件：

import progressBar from './components/progress_bar';components: {progressBar
},

子组件：

  {{item.value}}

    // 鼠标移入handleEnter() {console.log('in');},// 鼠标移出handleLeave() {console.log('out');}