一、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. 如何在自己的Activity中去控制EditText的焦点

    在进入一个Activity时,如果这个Activity中有EditText,则这个EditText会自动获取焦点,然后就会弹出软键盘,这样给用户体验不是很好.所以一般会通过代码控制让EditText不 ...

  2. gridview的高级使用

      后台数据 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  3. Aop编程--注解与xml的实现

    一.注解方式 1.首先引入spring对于aop编程的jar支持包,spring框架没有的包请自行在网上下载. aopalliance-alpha1.jar aspectjrt.jar aspectj ...

  4. 【转】 利用spring的profile切换不同的环境

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  5. String to Integer (atoi) - 复杂的测试

    这个题..是要把字符串转为整数.注意是整数,我看到整数的时候松了一口气,没有小数点的判断应该更好做.而且基本的转化函数我想每个程序员都无法忘记: res=res*+(str[i]-'); 其实就是这么 ...

  6. Week 5a - Mouse input and more lists ----mouse input

    <span style="font-size:14px;">import simplegui import math # global variables ball_p ...

  7. jQuery源码,匿名函数自执行

    jQuery框架的首尾是这样写的()(), (function(window){//这个window是个入参,随便起个名字都行 //这里面全都是js代码 })(window)//这个括号里的windo ...

  8. VCC、VDD、VEE、VSS的区别

    电路设计以及PCB制作中,经常碰见电源符号:VCC. VDD.VEE.VSS,他们具有什么样的关系那? 一.解释 VCC:C=circuit 表示电路的意思, 即接入电路的电压 VDD:D=devic ...

  9. 英文:known good board ( KGB) / 中文:测试用标准板,黄金板

    作为标准部件提供的.完全符合设计电气性能的在制板,可以作为与其它印制板比较的标准.

  10. codeblocks + MinGW 以及vc 使用预编译头文件的方法

    MinGW编译器: 1.打开工程文件,在工程文件浏览其中,在你要设置为预编译的头文件上,点击鼠标右键,选择“属性(properties)”  你会看到一个多页面的属性框,选择“构建(build)”页面 ...