JavaScript的事件对象_鼠标事件
实现拖拽一个元素
拖拽的流程：
当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="box1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件,当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function(event){
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop; //为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot; //修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
}; //为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
JavaScript的事件对象_鼠标事件的更多相关文章
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javaScript事件（五）事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- (93)Wangdao.com_第二十六天_鼠标事件
鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click 按下鼠标(通常是按下主按钮)时触发. mousedown 首先触发,mouseup 接着 ...
- 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...
- css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
随机推荐
- 一个通用的DAO模型实现增删改查
首先三个架包: mysql-connector-java-jar commons-dbcp-1.4jar commons-pool-1.5.5jar 导进去: (从上往下一次调用,实现功能) ---- ...
- 使用Texture2D创建Cubemap
网上有很多,但大多使用Camera.RenderToCubemap接口,不能满足需求. 写了段代码可以载入Texture2D生成Cubemap(在Editor下运行): /// <summary ...
- Poj(1511)，SPFA
题目链接:http://poj.org/problem?id=1511 嗯,最后一次写SPFA了,以后就套模板了. 题意:给出n个点和n条有向边,求所有点到源点1的来回最短路之和(保证每个点都可以往返 ...
- SharePoint自动化系列——Site/Web/List级别的导航菜单
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 需求:在不同的测试用例中,对脚本中不确定的因素需要和用户交互来确定,比如选择哪个site,选择哪个 ...
- Mysql-学习笔记（==》集合函数与分组四）
-- 聚集函数 配合分组语句 group by-- 显示最高分SELECT MAX(sscore) FROM db.`student`;-- 显示最高分学生的信息min maxSELECT * FRO ...
- java-cmd-命令行编译和运行java文件
一.使用的工具 1.javac 2.java 二.命令 项目目录只这样的 D:/project/src/com/example/Child.java D:/project/src/com/exampl ...
- <转>“人脉投资”的10条建议
谁都知道人脉很重要,所以有些人非常勤奋的“做人脉”,他们往往会这样做—— 积极的参与各类线下活动,逢人就换名片.加微信. 见到名人或者重要人物必合影,而且他们还会掏出手机来给你看. 逢年过节,给所有他 ...
- 使用entityframework操作sqlite数据库
首先要安装好,所需要的类库,通过NuGet来处理 http://stackoverflow.com/questions/28507904/vs-2015-sqlite-data-provider 安装 ...
- PCL点云库：ICP算法
ICP(Iterative Closest Point迭代最近点)算法是一种点集对点集配准方法.在VTK.PCL.MRPT.MeshLab等C++库或软件中都有实现,可以参见维基百科中的ICP Alg ...
- C语言程序设计现代方法1，2，3章
1:浮点型(float)运算比int慢,并且可能存在舍入误差 如float存储0.1,以后使用可能会变成0.099999999987 2:宏定义只用大写,这是大多数C程序猿遵循的规范! C语言区分大小 ...