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)
  • 相关阅读:
    转载 轻松搞定面试中的二叉树题目
    关于AVplayer 缓冲问题的处理
    关于iOS接收到推送消息后跳转问题
    iOS 黑魔法
    UITableView的优化
    OC是动态运行时语言是什么意思?什么是动态识别,动态绑定?
    iOS深复制和浅复制
    iOS内存管理(ARC,MRC)
    iOS数据持久化
    详解KVO,KVC
  • 原文地址:https://www.cnblogs.com/karl-kidd/p/12609622.html
Copyright © 2011-2022 走看看