一、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. 什么是Thrift

    起源 百度百科怎么说 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发. 它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, ...

  2. SharePoint网站集功能介绍

    SharePoint网站集功能介绍 https://support.office.com/zh-cn/article/%E5%90%AF%E7%94%A8%E6%88%96%E7%A6%81%E7%9 ...

  3. Unity 对象池 生产 保存

    Unity对象池主要是保存那些常用的物体,避免他们在不断销毁和创造中损坏性能. 主要思路为:创造物体时,判断是否存在,如果存在则调用并使其显示.如果不存在则创造一个新的. 当销毁时,调用协程延时隐藏物 ...

  4. Median of Two Sorted Arrays-分治法

    题目意思很简单将两个有序数组合并之后的中位数找出来.题目要求使用log(m+n)的时间复杂度来做. 虽然言简意赅,但不得不承认这个题目我自己想了好久也没做出来,隐约觉得应该使用寻找第k大数的算法来做, ...

  5. NGUI 按钮音效问题

    昨天给NGUI的按钮添加音效时,刚开始是自己新建空对象绑定声音的,后来发现NGUI按钮携带button sound组件,直接将音效拖入即可,不用写一行代码,非常简单.但是后来发现添加相同的音效有的按钮 ...

  6. 最短路径算法—Dijkstra(迪杰斯特拉)算法分析与实现(C/C++)

    Dijkstra算法 ———————————最后更新时间:2011.9.25———————————Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径. ...

  7. cocos2dx进阶学习之CCSprite

    继承关系 CCSprite -> CCNodeRGBA       ->   CCNode, CCRGBAProtocol CCTextureProtocol 从继承关系可以看出,CCSp ...

  8. Debian下Apache配置多域名访问

    请见Github博客:http://wuxichen.github.io/Myblog/php/2014/10/10/DebianApacheSetting.html

  9. java学习之IO文件分割

    package om.gh.homework; import java.io.*; /** * 实现分割文件; * @param file */ public class HomeWork { /** ...

  10. Asteroids(最小点覆盖)

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18183   Accepted: 9905 Descri ...