vue.js 在Google Chrome上单击鼠标悬停事件后才触发

qaxu7uf2 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(130)

我尝试在光标位于列表项上时运行一个函数，如下所示：

<div id="vue-app">
    <ul>
        <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
    </ul>
</div>

new Vue({
    el: '#vue-app',
    data: {
        items: ['meat', 'fruits', 'vegetables'],
    },
    methods: {
        removeItem(value) {
            ...
        }
    },
});

但是mouseover事件只在我点击列表项时触发。我做错了什么？

鼠标悬停

鼠标点击

vue.js

来源：https://stackoverflow.com/questions/54920138/mouseover-event-not-firing-till-clicked-on-google-chrome

2条答案

按热度按时间

jhdbpxl91#

检查此工作代码

new Vue({
    el:'#vue-app',
    data:{
        items:['meat','fruits','vegetables'],
    },
    methods:{
        removeItem(value){
          console.log(value);
        }
    },
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<div id="vue-app">
        <ul>
            <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
        </ul>
</div>

赞(0）回复(0）举报 2023-10-23

b1payxdu2#

我的问题是设备工具栏已启用。它在我的页面顶部放置了一个触摸模拟状态栏，我的光标变成了一个灰色的圆圈。这是防止触发鼠标事件，除非我点击。
尝试关闭开发人员工具中的设备工具栏。在Mac上，将开发人员工具窗口置于焦点中，键入cmd + shift + m或单击选择元素图标和元素菜单项之间的图标。

赞(0）回复(0）举报 2023-10-23