一、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. mysql待整理

    1. MYSQL SQL_NO_CACHE的真正含义 http://www.dewen.org/q/5149/Mysql 是 结果不缓存,但查询还是缓存了. 如果要重新测试,就在查询前先执行一下&qu ...

  2. 移除Strorefront站点footer上的Storefront Design By WooThemes字样

    进入wp-content\themes\storefront\inc\structure\footer.php, 注释掉代码: if ( ! function_exists( 'storefront_ ...

  3. 用pc浏览器打开手机页面

    原理是仿造http包头,下面已chrome为例. 方法:运行->输入如下手机操作系统对应的代码即可. 安卓: chrome.exe --user-agent="Mozilla/5.0 ...

  4. 说说读卡应用那点事儿，以SCL010为例

    前一阵子的项目, 跟读卡应用有关,这篇博客算是我学习智能卡方面知识的而一个总结,也可以看作这个领域的一个很简单的简介,他写得很不书面,更像是沿着我自己认识过程的总结.所以这里面有很多我自己理解的地方, ...

  5. Linux的五个查找命令find,locate,whereis,which,type

    Linux的五个查找命令 1. find 最常见且最强大的命令,可以查找任何文件. 格式 $ find   指定目录   指定条件   指定动作   指定目录: 所要搜索的目录及其子目录,默认当前目录 ...

  6. Uva 225 Golygons

    这道题如果直接用Dfs,运气好的话是可以直接过的. 但如果要在Dfs的基础上加快速度,剪枝是必不可少的. 我的剪枝策略: 1.当前点(x,y)回到出发点至少需要 |x| +| y| 步,如果剩余的步数 ...

  7. poj 2833 The Average(堆)

    题目链接:http://poj.org/problem?id=2833 思路分析:由于数据量较大,超出存储范围,使用不能使用数组存储数据在进行排序.考虑维护一个最大堆与最小堆,依次读取数据, 记录数据 ...

  8. pxe网络安装操作系统 原理与详细过程

    摘要:在实际工作中,我们经常会遇到这样的情况:想要安装Linux但是计算机不带光驱或软驱,或者是笔记本配置的非标准的软驱和光驱,如1394接口,USB接口等,在Linux安装时所引导的Linux内核一 ...

  9. iOS 数据库第三方FMDB的简单使用

    一 FMDB的简单说明及介绍 FMDB的github地址 https://github.com/ccgus/fmdb FMDB是一款简洁的,易用的封装库,简单介绍一下FMDB的使用 在FMDB下载文件 ...

  10. C++数据结构之图

    图的实现是一件很麻烦的事情,很多同学可能在学数据结构时只是理解了图的基本操作和遍历原理,但并没有动手实践过.在此,我说说我的实现过程. 首先,在草稿纸上画一个图表,这里是有向图,无向图也一样,如下: ...