zoukankan      html  css  js  c++  java
  • 一个vue的循环列表,里面的按钮的移入事件

    需求:移入的时候,互相关注变成取消关注

    移入移出事件传参$event,把这个参数打印出来看就可以搞定,而不是移入的时候,文本都改变,只改变当前行 的文本

    <p  @mouseover="over($event)" @mouseout="out($event)">互相关注</p>


    out (t) {
    t.target.innerText = '互相关注'
    },
    over (t) {
    console.log(t, 1)
    console.log(t.target.innerText, 1)
    t.target.innerText = '取消关注'
    },

     不能这么写,这么写的话ie10点击取消关注会卡死,应为mouseover有冒泡,这里应该用mouseenter只在当前,不用event

    ****************************************************************************************************

    ****************************************************************************************************

    最好这么写

    <p class="focus-span" v-if="item.concernStatus==2" @click="focusTogether(item.userId)" @mouseenter="over" @mouseleave="out">{{msg}}</p>
    data里面
    msg:'互相关注'
    out () {
    this.msg = '互相关注'
    },
    over () {
    this.msg = '取消关注'
    },
    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout;相当于有冒泡
    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

    这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。这就时为啥ie兼容的时候要卡死

  • 相关阅读:
    解决android模拟器太大,小屏幕无法完全显示的问题
    寡人写的第一个HTML5页面
    android开发环境重装系统之后的配置
    PHP程序的一次重构记录
    重构遗留代码(1):金牌大师
    java加密算法研究
    理解Java常量池
    由一个项目看java TCP/IP Socket编程
    java List分组和排序处理
    JAVA获取方法参数名的分析(一)
  • 原文地址:https://www.cnblogs.com/myfirstboke/p/9150809.html
Copyright © 2011-2022 走看看