js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）-Toy模板网

这篇具有很好参考价值的文章主要介绍了js的鼠标事件（JavaScript的鼠标事件，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=“方法名” ；

文章来源地址https://www.toymoban.com/news/detail-522199.html

到了这里，关于js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！