js中的鼠标事件有哪些（用法示例学习进阶）

目录

• 一、鼠标事件类型详细说明
• 二、鼠标点击
• 示例
• 三、鼠标移动
• 示例
• 四、鼠标经过
• 示例
• 五、鼠标来源
• 示例1
• 示例2
• 六、鼠标定位
• 示例1
• 示例2
• 示例3
• 七、鼠标按键
• 示例

<a name="tag" id="tag" href="#" rel="external nofollow" >a</a>
<script>
    var a = document.getElementsByTagName("a");  //获取页面中所有超链接元素
    for (var i = 0; i < a.length; i ++) {  //遍历所有a元素
        if ((new RegExp(window.location.href)).test(a[i].href)) {
            //如果当前超链接href属性中包含本页面的URL信息
            a[i].onclick = function () {  //则为超链接注册鼠标单击事件
                return false;  //将禁止超链接的默认行为
            }
        }
    }
</script>

<div id="box" ></div>
<script>
    // 初始化拖放对象
    var box = document.getElementById("box");
    // 获取页面中被拖放元素的引用指针
    box.style.position = "absolute";  // 绝对定位
    box.style.width = "160px";  // 定义宽度
    box.style.height = "120px";  // 定义高度
    box.style.backgroundColor = "red";  // 定义背景色
    // 初始化变量，标准化事件对象
    var mx, my, ox, oy;  // 定义备用变量
    function e(event){  // 定义事件对象标准化函数
        if( ! event){  // 兼容IE浏览器
            event = window.event;
            event.target = event.srcElement;
            event.layerX = event.offsetX;
            event.layerY = event.offsetY;
        }
        event.mx = event.pageX || event.clientX + document.body.scrollLeft;
        // 计算鼠标指针的x轴距离
        event.my = event.pageY || event.clientY + document.body.scrollTop;
        // 计算鼠标指针的y轴距离
        return event;  // 返回标准化的事件对象
    }
     // 定义鼠标事件处理函数
    document.onmousedown = function(event){  // 按下鼠标时，初始化处理
        event = e(event);  // 获取标准事件对象
        o = event.target;  // 获取当前拖放的元素
        ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
        oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
        mx = event.mx;  // 按下鼠标指针的x轴坐标
        my = event.my;  // 按下鼠标指针的y轴坐标
        document.onmousemove = move;  // 注册鼠标移动事件处理函数
        document.onmouseup = stop;  // 注册松开鼠标事件处理函数
    }
    function move(event){  // 鼠标移动处理函数
        event = e(event);
        o.style.left = ox + event.mx - mx  + "px";  // 定义拖动元素的x轴距离
        o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
    }
    function stop(event){  // 松开鼠标处理函数
       event = e(event);
       ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
       oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
       mx = event.mx ;  // 记录鼠标指针的x轴坐标
       my = event.my ;  // 记录鼠标指针的y轴坐标
       o = document.onmousemove = document.onmouseup = null;
       // 释放所有操作对象
    }
</script>

<div>
    <div>
        <div>盒子</div>
    </div>
</div>
<script>
    var div = document.getElementsByTagName("div");
    // 获取3个嵌套的div元素
    for(var i=0;i<div.length;i++){    // 遍历嵌套的div元素
        div[i].onmouseover = function(e){   // 注册移过事件处理函数
            this.style.border = "solid blue";
        }
        div[i].onmouseout = function(){   // 注册移出事件处理函数
            this.style.border = "solid red";
        }
    }
</script>

<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){ // 注册mouseover事件处理函数
        var e = e || window.event;  // 标准化事件对象，兼容DOM和IE事件模型
        var o = e.target || e.srcElement;  // 标准化事件属性，获取当前事件的节点
        alert(o.tagName);      // 返回字符串“DIV”
    }
</script>

<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.fromElement;  //标准化事件属性，获取与当前事件相关的节点
        alert(o.tagName);
    }
    div.onmouseout = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.toElement;  // 标准化事件属性，获取与当前事件相关的节点
        alert(o.tagName);
    }
</script> 

var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

var pos = function (o, x, y, event) {  //鼠标定位赋值函数
    var posX = 0, posY = 0;  //临时变量值
    var e = event || window.event;  //标准化事件对象
    if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定义当前对象为绝对定位
    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
    o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
    x = event.layerX;
    y = event.layerY;
}

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //标准化事件对象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>

document.onclick = function (e) {
    var e = e || window.event;  //标准化事件对象
    if (e.button == 2) {
        e.preventDefault();
        return false;
    }
}