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 ...
随机推荐
- php之属性重载和方法重载
<?php /** * * @authors Your Name (you@example.org) * @date 2016-06-13 20:40:19 * @version $Id$ */ ...
- PHP和ajax详解
优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验基于xml标准化,并被广泛支持,不需安装插件等进一步促进页面和数据的分离缺点:A ...
- JSTL.带标签体的标签，方法和例子
1. 实现 forEach 标签: 两个属性: items(集合类型, Collection), var(String 类型) doTag: 遍历 items 对应的集合 把正在遍历的对象放入到 pa ...
- http模式
http遵守请求响应模式: 请求: 请求行:HTTP方法-请求的URL-HTTP版本 请求行 空行 消息体 响应: 状态行:HTTP版本-响应码-响应描述 响应头 空行 消息体 其他的重点: http ...
- 如何借助浏览器Console使用Js进行定位和操作元素
在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法? 其实我们都知道,Sel ...
- c++类中的常量
C++类中的常量 由于#define 定义的宏常量是全局的,不能达到目的,于是想当然地觉得应该用 const 修饰数据成员来实现.const 数据成员的确是存在的,但其含义却不是我们所期望的.cons ...
- Win8.1系统下搭建IIS8.5+php-5.6运行环境教程
本文是在window 8.1 的IIS8.5 中搭建php环境 步骤: 1.下载php-5.6程序包 ,官网地址为:http://windows.php.net/download/ 注意要下载 ...
- mvcAPI （入门 3）(源码)
mvcAPI (入门 3)(源码) http://download.csdn.net/detail/chunfang740/9078579
- #有如下值集合[11,22,33,44,55,66,77,88,99,90...],将所有大于66值保存至字典的一个key中，将小于66的值保存至大二个key的值
#!/usr/bin/env python #有如下值集合[11,22,33,44,55,66,77,88,99,90...],将所有大于66值保存至字典的一个key中,将小于66的值保存至大二个ke ...
- 完成Adventure中的主方法
package a; public interface CanSwim { void swim(); } package a; public interface CanFly { void fly() ...