vue3.0 在启动setInterval的时候无法触发原先绑定事件,附一个跑马灯demo

Question

问题遇到的现象和发生背景

在启动setInterval的时候无法触发原先绑定事件

问题相关代码

<template>
  <div class="myls-out-div" style="overflow: hidden">
    <button @click="mylsRunHorseLight">aaa</button>
    <ul
      id="mylspaomadeng"
      class="myls-ul"
      @mouseover="mouseover"
      @mouseleave="mouseleave"
    >
      <li
        class="myls-li"
        v-for="(img, index) in imgArry"
        :id="img.bsm"
        @click="PitchImge(img, index)"
        :key="index"
      >
        <div class="myls-div" @click="PitchImge(img, index)">
          <el-input
            type="image"
            class="myls-div-img"
            :src="PDimgs(img.fjmc)"
            @click.native="PitchImge(img, index)"
          ></el-input>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//import { $ } from 'jquery'
export default {
  data() {
    return {
      mylsTimer: null,
      resetWidth: 0,
      left: 0,
      LiWidth: 0,
      imgArry: [
        {
           fjmc: '/img/2png',
          x: 114.576919555664,
          y: 32.0314254760742,
          xzqmc: '罗山县',
          bsm: '116546',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23'
        },
        {
          fjmc: '/img/2png',
          x: 114.577011108398,
          y: 32.0314865112305,
          xzqmc: '罗山县',
          bsm: '1316546',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23'
        },
        {
        fjmc: '/img/2png',
          x: 114.577011108398,
          y: 32.0314865112305,
          xzqmc: '罗山县',
          bsm: '1165463',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23'
        },
        {
  fjmc: '/img/2png',      
    x: 114.577011108398,
          y: 32.0314865112305,
          xzqmc: '罗山县',
          bsm: '1165461',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23 '
        },
        {
            fjmc: '/img/2png',
          x: 114.576919555664,
          y: 32.0315742492676,
          xzqmc: '罗山县',
          bsm: '1116546',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23'
        },
        {
          fjmc: '/img/2png',
          y: 32.0316505432129,
          xzqmc: '罗山县',
          bsm: '1165416',
          tbbsm: 'a20e8f15c2844b7dad6cf28f1c094a23'
        }
      ]
    }
  },
  methods: {
    //开始播放
    mylsRunHorseLight() {
      let _this = this
      if (this.mylsTimer != null) {
        clearInterval(this.mylsTimer)
      }
      var oUl = document.getElementById('mylspaomadeng')
      if (oUl != null) {
        oUl.innerHTML += oUl.innerHTML
        oUl.innerHTML += oUl.innerHTML
        oUl.innerHTML += oUl.innerHTML
        var lis = oUl.getElementsByTagName('li')
        var lisTotalWidth = 0
        _this.LiWidth = lis[0].offsetWidth
        _this.resetWidth = 0
        for (var i = 0; i < lis.length; i++) {
          lisTotalWidth += lis[i].offsetWidth
        }
        for (var i = 1; i <= lis.length / 4; i++) {
          _this.resetWidth += lis[i].offsetWidth
        }
        oUl.style.width = lisTotalWidth + 'px'
        _this.left = 0
        this.mylsTimer = setInterval(function () {
          _this.left -= 1
          if (this.left <= -_this.resetWidth) {
            _this.left = 0
          }
          oUl.style.left = _this.left + 'px'
        }, 20)
      }
    },
    //停止轮播
    mouseover() {
      clearInterval(this.mylsTimer)
    },
    //继续轮播 移除
    mouseleave() {
      //   let _this = this
      //   clearInterval(this.mylsTimer)
      //   var oUl = document.getElementById('mylspaomadeng')
      //   this.mylsTimer = setInterval(function () {
      //     _this.left -= 1
      //     if (_this.left <= -_this.resetWidth) {
      //       _this.left = 0
      //     }
      //     oUl.style.left = _this.left + 'px'
      //   }, 2000)
    },
    PitchImge(img, index) {
      console.log('选中了')
      let PitchImges = document.getElementsByClassName('myls-divPitch')
      if (PitchImges.length != 0) {
        PitchImges.forEach((item) => {
          item.classList.toggle('myls-divPitch')
        })
      }
      //改变样式
      let PitchImge = document.getElementById('' + img.bsm)
      PitchImge.classList.toggle('myls-divPitch')
    },
    //图片简洁
    PDimgs(data) {
      let IsCompress = data.search('myhuaweicloud.com')
      if (IsCompress) {
        return data + '?x-image-process=image/resize,w_100,h_57/quality,q_10'
      }
      return data
    }
  }
}
</script>

<style scoped>
.myls-out-div {
  width: 100%;
  height: 90%;
  /* background-color: #fafafa; */
  float: left;
  overflow: hidden;
}
.myls-div {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.myls-divPitch {
  border: 2px solid rgb(65, 245, 245, 0.4);
}
.myls-div-img {
  width: 25%;
  height: 90%;
  margin: 5%;
  min-width: 150px;
  background: none;
}
>>> .myls-div-img .el-input__inner {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
}
.myls-ul {
  width: 100%;
  float: left;
  height: 100%;
  position: relative;
  margin: 0px;
  padding: 0px;
  z-index: 20;
}

.myls-li {
  list-style: none;
  width: 25%;
  max-width: 150px;
  display: inline-block;
  float: left;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 100%;
  margin: 0px;
  z-index: 50;
}
</style>

运行结果及报错内容

没有报错也没有触发方法

我的解答思路和尝试过的方法

我最开始以为是@mouseover="mouseover"
@mouseleave="mouseleave"这两个方法的问题但是写了demo以后发现不是,后来又以为是层级问题,就写了z-index:900000,也不行,求答

这是什么原因我要怎么样才能选中我想要的图片和触发绑定的方法

Answer 1

https://blog.csdn.net/tc1143481956/article/details/119798674 vue四个跑马灯