js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）

╰+哭是因爲堅強的太久メ 2023-10-02 23:49 4阅读 0赞

#### 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=“方法名” ；