JavaScript的鼠标事件(js的鼠标事件,vue的鼠标事件)

js鼠标事件,相关属性:

        var div = document.getElementById("box")

        // 1、单击事件 onclick
        div.onclick = function(){
            console.log("单击")
        }
        // 2、双击事件 ondblclick
        div.ondblclick = function(){
            console.log("双击")
        }
        // 3、鼠标按下  onmousedown
        div.onmousedown = function(){
            console.log('鼠标按下')
        }
        // 4、鼠标抬起  onmouseup
        div.onmouseup = function(){
            console.log('鼠标抬起')
        }
        // 5、鼠标移动  onmousemove
        div.onmousemove = function(){
            console.log("鼠标在这个div内部正在移动ing")
        }
        // 6、右键菜单  oncontextmenu
        div.oncontextmenu = function(){
            console.log("调出右键菜单")
        }
        // 7、滑轮滚动  onwheel
        div.onwheel = function(){
            console.log("滑轮滚动")
        }
        // 8、鼠标移入移出mouseenter/mouseleave  不继承,
        //    鼠标在子标签上不会触发事件;
        //    简单来说就是鼠标进入div区域会显示移入,出div就会显示移出;
        div.onmouseenter = function(){
            console.log("鼠标移入")
        }
        // 9、
        div.onmouseleave = function(){
            console.log("鼠标移出")
        }

        // 10、鼠标悬停离开mouseover/mouseout 会继承,
        //     鼠标在子标签上也会触发事件,
        //     而悬停离开的话,就是鼠标进入div区域会提示悬停,
        //     然后鼠标进入p标签区域会先显示;
        //     离开 再悬停,最后移出显示离开;
        div.onmouseover = function(){
            console.log("鼠标移入")
        }
        // 11、
        div.onmouseout = function(){
            console.log("鼠标移出")
        }

vue鼠标事件,相关属性

(js鼠标事件和vue中的鼠标事件区别是省略了on字符):

鼠标单击:  @click="方法名" ;

鼠标双击 : @dblclick="方法名" ;

鼠标按下:  @mousedown="方法名" ;

鼠标抬起:  @mouseup="方法名" ;

鼠标移动:  @mousemove="方法名" ;

鼠标右键    @contextmenu="方法名" ;

鼠标滚轮:  @mousewheel="方法名" ;



//mouseenter 事件只有在鼠标指针进入被选元素时被触发;

鼠标进入: @mouseenter="方法名" ;

//mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发;

鼠标进入: @mouseover="方法名" ;

//mouseenter和mouseover的区别在于mouseover有冒泡行为;



//mouseleave和mouseout的区别在于mouseout有冒泡行为;

鼠标离开:  @mouseleave=“方法名” ;

鼠标离开:  @mouseout=“方法名” ;

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北城笑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值