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)
  • 相关阅读:
    [Linux 流量管理] Cacti的插件安装和使用
    expdp impdp 数据库导入导出命令详解
    Dropping all user tables/sequences in Oracle
    Oracle RMAN 的 show,list,crosscheck,delete命令整理
    EXP00041错误,遇到字符集问题的解决方式
    ORA00312的解决方法
    如何禁止MSN传递文件
    如何解决Parallel query大于1的问题
    bzoj5028小Z的加油店(线段树+差分)
    [转]C# 互操作性入门系列(三):平台调用中的数据封送处理
  • 原文地址:https://www.cnblogs.com/karl-kidd/p/12609622.html
Copyright © 2011-2022 走看看