目录
元素拖拽实现(点击拖动可视屏幕任意位置)
/*
拖拽
onmousedown 按下
onmousemove 鼠标移动是在按下的基础之上
onmouseup 抬起
*/
var div = document.getElementById("div");
// 绑定事件
// 鼠标按下
div.onmousedown = function (ev) {
// 事件对象兼容处理
ev = ev || window.event;
// 阻止默认行为 拖拽元素内容有文字(选中) 或 图片 会被拖拽
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
// IE8及以下利用阻止默认行为 阻止不了
// 事件锁定 将当前事件和元素锁定到一起 IE独有的
if (div.setCapture) {
div.setCapture();
}
// 鼠标距离拖拽元素的距离
var x = ev.clientX - div.offsetLeft;
var y = ev.clientY - div.offsetTop;
// 鼠标移动
// 鼠标移动过快会离开当前拖拽元素,但是一定不会离开document
document.onmousemove = function (ev) {
// 事件对象兼容处理
ev = ev || window.event;
// 获取拖拽的位置 left和top
var left = ev.clientX - x;
var top = ev.clientY - y;
// 边界判断
var minLeft = 0,
maxLeft = document.documentElement.clientWidth - div.offsetWidth;
var minTop = 0,
maxTop = document.documentElement.clientHeight - div.offsetHeight;
if (left <= minLeft) {
left = minLeft;
} else if (left >= maxLeft) {
left = maxLeft;
}
if (top <= minTop) {
top = minTop;
} else if (top >= maxTop) {
top = maxTop;
}
// 设置位置
div.style.left = left + 'px';
div.style.top = top + 'px';
}
}
// 鼠标抬起
div.onmouseup = function () {
// 解除事件锁定 IE独有的
if(div.releaseCapture){
div.releaseCapture();
}
// 移除鼠标移动事件
document.onmousemove = null;
}
DOM滚轮事件处理
滚轮事件绑定
// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
// onmousewheel
// 滚轮事件触发 滚动条会滚动是属于默认行为
document.onmousewheel = function(ev){
ev = ev || window.event;
// 给文档绑定滚轮事件不能够阻止默认行为 就报错了
// ev.preventDefault?ev.preventDefault():ev.returnValue = false;
console.log("哈哈");
}
var div = document.getElementsByTagName("div")[0];
// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
div.onmousewheel = scroll;
// 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)
div.addEventListener("DOMMouseScroll", scroll);
function scroll(ev) {
ev = ev || window.event;
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
console.log("哈哈");
}
滚轮事件方向
// 获取元素
var div = document.getElementsByTagName("div")[0];
// 绑定事件
// 除了FirFox(火狐)以外其它的浏览器既可以是使用DOM0也可以使用DOM2去绑定
div.onmousewheel = scroll;
// 火狐提供了独有的滚轮事件DOMMouseScroll (火狐浏览器只能使用DOM2绑定)
div.addEventListener("DOMMouseScroll", scroll);
function scroll(ev) {
// 事件对象兼容处理
ev = ev || window.event;
// 阻止滚动条滚动的默认行为
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
// 判断滚轮的方向
// 火狐以外其它浏览器,火狐下没有这个属性
// console.log(ev.wheelDelta); //IE前:正数 120