一、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. OutLook 2010 收件箱子文件夹收到新邮件时没有桌面通知

    开始---规则----管理规则和通知 规则和通知---电子邮件规则---批量选择账号---更改规则---在新邮件通知和窗口显示(选中)---确定 录入通知邮件消息---确定 效果如下:

  2. linux命令: patch

    一. 针对单文件的patch: 我们以mkprj.sh.1和mkprj.sh两个文件为例: [root@localhost tst]# lsmkprj.sh.1  mkprj.sh 看两个文件的差异: ...

  3. HTML5 总结-表单-输入类型

    HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url nu ...

  4. delphi数字签名验证及能够获取数字签名文件信息（利用wintrust.dll的导出函数，翻译一下）

    unit TrustCheck; interface uses Windows,SysUtils,jwaWinTrust,JwaWinCrypt; function CheckFileTrust(co ...

  5. pageContext.request.contextPath 和 request.getContextPath()

    作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的. El表达式的写法:${pageContext.request.contextPath} jsp的写法:<%=request.g ...

  6. 将string当字节流使

    string是C++标准定义的字符串类,它不但支持文本,而且支持二进制字节流.给一个string变量赋值有多种方法: 1) 拷贝构造函数 2) 等号赋值函数 3) append成员函数 4) push ...

  7. 一个轻client，多语言支持，去中心化，自己主动负载，可扩展的实时数据写服务的实现方案讨论

    背景 背景是设计一个实时数据接入的模块,负责接收client的实时数据写入(如日志流,点击流),数据支持直接下沉到HBase上(兴许提供HBase上的查询),或先持久化到Kafka里.方便兴许进行一些 ...

  8. Android Intent 解析之二

    服务端Intent运行过程: Sticky:这个类型的BroadCast表示某些Intent须要被保留,当新的应用起来后,须要关注这个消息,可是呢,又不须要启动这个应用来接收此消息,比方耳机插入等消息 ...

  9. C程序设计语言之一

    %d 按照十进制整形数打印: %o 按照八进制整形数打印: %x 按照十六进制整形数打印: %c 表示字符 %s 表示字符串 %% 表示%本身打印: %ld long型输出 ”幻数“: #define ...

  10. Latex（一）公式自动编号与自动引用

    在进行latex引用时,有两种办法: 一,被动引用. 如有这样一段代码: $$ x^2+y^2= z^2.\eqno(1.1) $$ In this paper, we investigated (1 ...