一、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. 谁有SMI-S Provider的一些源码，能参考一下吗

    我要用OpenPegasus根据SMI-S规范来写provider,不知道如何下手啊,求高手指点

  2. openstack之cinder

    一.cinder概述: 1.F版之前,并没有cinder,对应的组件为nova-volume:以Rest API的形式提供服务 2.cinder目标: 减少nova的复杂性,降低nova的负载,支持多 ...

  3. Oracle游标循环更新数据案例

    declare v_XTXMBH number; v_ZJZJZJRQ varchar2(40); cursor c_job is SELECT XT.XTXMBH AS XTXMBH, QJ.ZJZ ...

  4. Java排序之排序大综合

    一.最近写了一些排序,于是和和大家分享一下:(默认都是从小到大排序) 二.冒泡排序 1.什么是冒泡排序:原理是临近的两个数比较大小,将较大的数往后移,这样遍历一趟数组以后,最大的数就排在的最后面(时间 ...

  5. IT资源专业搜索-www.easysoo.cn

    创始人:samrthhl 时间:2015-11-8 关于易搜 易搜(www.easysoo.cn)是一个面向IT开发从业人员的专业资源搜索站点,它将全球的知名博客论坛.专业IT行业站点.知名咨询机构和 ...

  6. 单色VGA显示verilogHDL通用代码

    今天做VGA,真是拼凑了好久啊.唉,总算完成了. 本来想偷懒移植,最后还是自己写的代码. //2015/12/13 //designer : pengxiaoen //function : vga c ...

  7. hibernate 缓存 4.3

    缓存在hibernate中是天生就有的,是一级缓存,当session关闭时一级缓存就失效了 一级缓存是内置的,生效范围是在同一个session中才行.二级缓存是需要配置才有 判断当前项在不在一级缓存中 ...

  8. DataReader的例子

    前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataReader对 ...

  9. CloudStack 物理网络架构

    原文地址:http://www.shapeblue.com/cloudstack/understanding-cloudstacks-physical-networking-architecture/ ...

  10. JAX-RS

    一.简介 JAX-RS(Java API for RESTful Web Services),是JAVAEE6中提出的Java 编程语言的应用程序接口,支持按照表述性状态转移(REST)架构风格创建W ...