一、event对象

　　var oEvent = ev || event;//获取事件对象　　oEvent.clientX　　oEvent.clientY//获取鼠标坐标　　oEvent.cancelBubble = true;//阻止冒泡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; display:none; position:absolute;}
</style>
<script>
window.onload = function(){
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    //event对象，用来获取事件的详细信息

    //获取鼠标位置
    document.onmousemove = function(ev){
        var oEvent = ev || event;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        oDiv.style.top = oEvent.clientY + scrollTop + 'px';
        oDiv.style.left = oEvent.clientX + 'px';
    };

    oBtn.onclick = function(ev){
        var oEvent = ev || event;
        oDiv.style.display = 'block';

        oEvent.cancelBubble = true;
    };

    document.onclick = function(){
        oDiv.style.display = 'none';
    };
};
</script>
</head>

<body style="height:2000px;">
<input id="btn1" type="button" value="显示" />
<div id="div1">
    <a href="http://baidu.com">百度</a>
</div>
</body>
</html>

javascript每日一练（六）——事件一的更多相关文章

  1. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

  2. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

  3. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  4. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  5. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  6. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  7. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  8. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  9. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

随机推荐

  1. Oracle 经典SQL 专为笔试准备

    相信把这99条sql搞定,Oracle基本笔试简直就像玩的一样(史上最全,最经典的入门级Oracle查询语句) 1. select * from emp; 2. select empno, ename ...

  2. 深入分析MySQL ERROR 1045 (28000)

    这几天在MySQL新建用户后.出现訪问拒绝的问题,错误码为ERROR 1045(28000).在网上搜索了非常久.找到了非常多解决的方法,但非常遗憾的是这么多办法没有一个能解决该问题.尽管出现的错误码 ...

  3. x0vncserver Fatal server error: no screens found

    I make a connection through SSH and  then I type: # x0vncserver --PasswordFile=/home/hello/.vnc/pass ...

  4. LeetCode: Sum Root to Leaf Numbers [129]

    [题目] Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a n ...

  5. 使用LINQ的几个小技巧

    这里总结了这些技巧.介绍如何使用LINQ来: 初始化数组 在一个循环中遍历多个数组 生成随机序列 生成字符串 转换序列或集合 把值转换为长度为1的序列 遍历序列的所有子集 如果你在LINQ方面有心得也 ...

  6. PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

  7. FreeCodeCamp：Truncate a string

    要求: 用瑞兹来截断对面的退路! 截断一个字符串! 如果字符串的长度比指定的参数num长,则把多余的部分用...来表示. 切记,插入到字符串尾部的三个点号也会计入字符串的长度. 但是,如果指定的参数n ...

  8. codeforces 559A(Gerald's Hexagon)

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u   Description Gera ...

  9. 'nmake' 不是内部或外部命令，VCVARS32.BAT路径问题

    'nmake' 不是内部或外部命令,VCVARS32.BAT路径问题 2014-5-24 VC运行不正确基本上都是路径的问题,今天在进行Openssl开发的环境搭建时,需要使用nmake进行源码和库的 ...

  10. Oracle语句优化规则(一)

    1. 选用适合的ORACLE优化器     ORACLE的优化器共有3种:    a. RULE (基于规则)   b. COST (基于成本) c. CHOOSE (选择性)     设置缺省的优化 ...