zoukankan      html  css  js  c++  java
  • JavaScript中的鼠标事件

    利用下面这个div标签来做鼠标事件的演示,当把鼠标在‘我是div’和’我是span‘两个位置及其之外的位置上操作时,不同事件操作结果不同
    <div class="div1">我是div
      <br>
            <span>我是span</span>
        </div>

    1、左键单击事件 click

    var oDiv = document.querySelector('div');
    oDiv.onclick = function(){
        console.log('这是一个左键单击事件');
    }

    2、左键双击事件 dbclick

    var oDiv = document.querySelector('div');
    oDiv.ondbclick = function(){
        console.log('这是一个左键双击事件');
    }

    3、右键单击事件 contextmenu

    var oDiv = document.querySelector('div');
    oDiv.oncontextmenu = function(){
        console.log('这是一个右键单击事件');
    }

    4、鼠标器按下事件 mousedown

    var oDiv = document.querySelector('div');
    //只要按下就触发,不分左右键
    oDiv.onmousedown = function(){
        console.log('鼠标按下事件');
    }

    5、鼠标按下抬起`` 事件 mouseup

    var oDiv = document.querySelector('div');
    //只要抬起就触发,不分左右键
    oDiv.onmouseup = function(){
        console.log('鼠标离开事件');
    }

    6、鼠标移入事件
    经过边界线触发 mouseover mouseenter

    //每经过一个子级都会触发一次
    var oDiv = document.querySelector('div');
    oDiv.onmouseover = function(){
        console.log('鼠标over事件');
    }
    //只触发一次,父级触发后,经过子级不再触发
    var oDiv = document.querySelector('div');
    oDiv.onmouseenter = function(){
        console.log('鼠标enter事件');
    }

    7、鼠标移出事件
    经过边界线触发 mouseout mouseleave

    //经过父级不触发,从父级离开,并进入子级或其他级触发
    var oDiv = document.querySelector('div');
    oDiv.onmouseout = function(){
        console.log('鼠标out事件');
    }
    //进入父级不触发,进入子级也不触发,离开父级触发
    var oDiv = document.querySelector('div');
    oDiv.onmouseleave = function(){
        console.log('鼠标leave事件');
    }

    8、鼠标移动 mousemove
    鼠标再标签范围内移动,会触发事件,类似于hover

    //鼠标在父级里面,每移动一步都会触发效果,小幅度移动也被记录
    var oDiv = document.querySelector('div');
    oDiv.onmousemove = function(){
        console.log('鼠标move事件');
    }
    A True Master Is An Eternal Student(真正的大师总是怀着一颗学徒的心) ------(Master Yi)
  • 相关阅读:
    最大子数组问题(分治策略实现)
    Solving the Detached Many-to-Many Problem with the Entity Framework
    Working With Entity Framework Detached Objects
    Attaching detached POCO to EF DbContext
    如何获取qq空间最近访问人列表
    Health Monitoring in ASP.NET 2.0
    problem with displaying the markers on Google maps
    WebMatrix Database.Open… Close() and Dispose()
    Accessing and Updating Data in ASP.NET: Retrieving XML Data with XmlDataSource Control
    Create web setup project that has crystal reports and sql script run manually on client system
  • 原文地址:https://www.cnblogs.com/karl-kidd/p/12609622.html
Copyright © 2011-2022 走看看