undefinedfix
Sign in

How to make mouseout not execute when Vue click time

yqmao edited in Tue, 21 Sep 2021

clipboard.png

<template> <div>

<ul>
  <li><a :class="{'btn1':btn1,'btnHover1':btnHover1}" @click="btnClick1()" @mouseover="btnOver1()" @mouseout="btnOut1()">按钮1</a></li>
  <li><a :class="{'btn2':btn2,'btnHover2':btnHover2}" @click="btnClick2()" @mouseover="btnOver2()" @mouseout="btnOut2()">按钮2</a></li>
  <li><a :class="{'btn3':btn3,'btnHover3':btnHover3}" @click="btnClick3()" @mouseover="btnOver3()" @mouseout="btnOut3()">按钮3</a></li>
</ul>

</div></template><script> export default {

data() {
  return {
    btn1:true,
    btnHover1:false,
    btn2:true,
    btnHover2:false,
    btn3:true,
    btnHover3:false,
  }
},
mounted() {

},
methods: {
  btnOver1(){
    this.btn1=false;
    this.btnHover1=true;
  },
  btnOut1(){
    this.btn1=true;
    this.btnHover1=false;
  },
  btnClick1(){
    this.btnHover1=true;
  },
  btnOver2(){
    this.btn2=false;
    this.btnHover2=true;
  },
  btnOut2(){
    this.btn2=true;
    this.btnHover2=false;
  },
  btnClick2(){
    this.btnHover2=true;
  },
  btnOver3(){
    this.btn3=false;
    this.btnHover3=true;
  },
  btnOut3(){
    this.btn3=true;
    this.btnHover3=false;
  },
  btnClick3(){
    this.btnHover3=true;
  },
}

}</script><style lang="less" scoped>div{ margin-top: 200px; margin-left: 200px; li{

list-style: none;
float: left;

} a{

cursor: pointer;

} .btn1{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

} .btnHover1{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

} .btn2{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

} .btnHover2{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

} .btn3{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

} .btnHover3{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

}}

</style>

When I click on button 1, it will be interfered by mouseout

1 Replies
user282
commented on Tue, 21 Sep 2021

You make it so complicated. You can set a state. For example, add an isclick: false in data, set isclick to true when clicking, and judge isclick to false in mouseout to continue

clickHandler: function() {
    this.isClick = true;
},
mouseoutHandler: function() {
    if(!this.isClick) return;
    // 你的代码
}
lock This question has been locked and the reply function has been disabled.