一、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. Html表格&lt;table&gt;还是须要加入一些标签进行优化，能够加入标题&lt;caption&gt;和摘要&lt;table summary&gt;

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. python 之 yield表达式

    如果在某个函数中包含了yield, 这意味着这个函数已经是一个Generator, 它的执行 会和其他普通的函数有很多不同. 比如: def   h(): print    'To   be  bra ...

  3. js 常用的一些函数

    //设置默认焦点    var setFocus = function SetFocus(elementId) {        document.onkeydown = function (even ...

  4. 使CSS3样式在IE里面有效果

    1. 下载ie-css3.htc文件 2. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性. 3. z-index值一定要比周围元素的要高 ...

  5. 说说Xcode4中xib绑定的原理

    最开始的是时候始终没有弄明白xib文件中的绑定关系.经过一周的开发体验终于有一些理解与收获. Xib文件就是MVC模式中的View这个层的界面显示布局的信息.即类似Asp.net的aspx文件或者ja ...

  6. 两种方式在Tableau Desktop 中创建子弹图(Bullet Chart)

    子弹图,顾名思义是由于该类信息图的样子很想子弹射出后带出的轨道.起初,子弹图的发展是为了取代仪表盘上常见的那种里程表,时速表等基于圆形的信息表达方式.子弹图无修饰的线性表达方式使我们能够在狭小的空间中 ...

  7. C++之类与对象(1)

    下个阶段,我将讲解C++中面向对象的部分,也是C++对C语言改进的最重要的部分.以前C++也被叫做是"带类的C".今天主要讲类的构成,成员函数以及对象的定义和使用. 1.其实这一节 ...

  8. Web Api Route 注册要放在 Mvc Route 注册前

    今天想研究一下Web Api,写了一个测试Api,打开网站后浏览一下,可是却提示找不到方法,刚开始以为哪里配置错了,可找了半天也没见. 因为我是在一个现有Mvc站点做的Demo,所以打算新建一个Mvc ...

  9. java面板设计

    写面板真的是写到吐血,深深感受到什么叫又臭又长,可能是自己用的太烂吧. 关于布局管理器不写一下还是不懂,另外加面板的思想跟html中div的感觉差不多. 发现的一个小彩蛋:用JScrollPane的时 ...

  10. poj 2363 Blocks(暴力)

    题目链接:http://poj.org/problem?id=2363 思路分析:由于数据较小,采用暴力搜索法.假设对于矩形边长 1 <= a <= b <= c <= N; ...