javascript每日一练（六）——事件一
一、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每日一练（六）——事件一的更多相关文章
- javascript每日一练（七）——事件二：键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
- javascript每日一练（八）——事件三：默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
- javascript每日一练（一）——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练（十四）——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练（十三）——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练（十二）——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练（十一）——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练（十）——运动二：缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
随机推荐
- YUV / RGB 格式及快速转换算法
1 前言 自然界的颜色千变万化,为了给颜色一个量化的衡量标准,就需要建立色彩空间模型来描述各种各样的颜色,由于人对色彩的感知是一个复杂的生理和心理联合作用 的过程,所以在不同的应用领域中为了更好更准确 ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- BlokUI的使用
1.点击弹出层以外的区域关闭弹出层 $(document).ready(function() { $('#demo9').click(function() { $.blockU ...
- Mini-project # 1 - Rock-paper-scissors-___An Introduction to Interactive Programming in Python"RICE"
Mini-project description - Rock-paper-scissors-lizard-Spock Rock-paper-scissors is a hand game that ...
- Python读取Excel数据并根据列名取值
一直想将自己接触到的东西梳理一遍,可就是迈不出第一步,希望从这篇总结开始不要再做行动的矮人了. 最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用 ...
- NAS简介
转自IBM资料库:https://community.emc.com/docs/DOC-15977 在20世纪80年代初,英国纽卡斯尔大学布赖恩.兰德尔教授 ( Brian Randell)和同事通过 ...
- QT 遍历目录查找指定文件（比较简单）
QString FindFile(const QString &strFilePath, const QString &strNameFilters){ if (strFilePath ...
- wchar_t是内置还是别名（亲测有效：wchar_t在windows下是16位整数的别名，在linux等平台下是32位整数的别名。MSVC2008开始默认是/Zc:wchar_t）
接前一篇C++ ABI之名字改编(以Qt为例),继续看看C++名字改编相关的问题. 问题 MSVC 有一对选项/Zc:wchar_t- 与 /Zc:wchar_t控制wchar_t 于是 wchar_ ...
- libpng causes error concerning pngconf.h
Bug Description Ubuntu Gutsy Gibbon 7.10 - libpng 1.2.15~beta5-2ubuntu0.1 (bug probably concerned wi ...
- mmc一维下料测试
另一组数据, 长度 = 6000; 切割长度 = {1664, 1599, 1552, 1409, 1352, 802, 660}; 需求数量 = {32, 96, 160, 16, 384, 112 ...