day15

01-鼠标事件属性

console.log(ev);
console.log(ev.type); 获得事件类型
console.log(ev.clientX, ev.clientY); 客户端坐标(从浏览器可视区域左上角计算)
console.log(ev.pageX, ev.pageY); 距离页面左上角 坐标
console.log(ev.offsetX, ev.offsetY); 根据当前元素左上角 计算坐标
console.log(ev.screenX, ev.screenY); 根据显示器左上角 计算坐标
console.log(ev.button); 按钮编号
标准方法 阻止默认行为 使用 函数
ev.preventDefault
低版本ie浏览器 阻止默认行为
ev.returnValue = false;
box.oncontextmenu = function (ev) {
ev.preventDefault();
console.log(ev.type);
console.log(ev.button); 按钮编号 0表示左键 2表示右键
return false;

02-键盘事件属性

text.onkeydown = function (ev) {
如果在keydown事件中 获得输入框的值 那么获得是 按键之前的值
console.log(ev.type, this.value);
}
text.onkeyup = function (ev) {
在keyup中 可以获得输入后的值
console.log(ev.type, this.value);
}
ev.keyCode 或 ev.which 用于获得按键的 askii 编码
askii 编码 是 Unicode(0-65535) 编码的一个子集
常用askii编码
enter 13
ctrl 17
空格键 32
以下三个属性 是布尔类型属性 表示是否按下了该键(用于设置快捷键)
ev.ctrlKey
ev.shiftKey
ev.altKey

03-拖拽事件

window.onload = function () {
var box = document.querySelector(‘.box’);
mousedown box
mousemove document
mouseup document
box.onmousedown = function (ev) {
var offsetX = ev.offsetX,
offsetY = ev.offsetY;
document.onmousemove = function (ev) {
var pageX = ev.pageX,
pageY = ev.pageY;
var x = pageX - offsetX,
y = pageY - offsetY;
box.style.top = y + ‘px’;
box.style.left = x + ‘px’;
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
}

04-拖拽轨迹

window.onload = function () {
var box = document.querySelector(‘.box’);
var map = []; 存放移动轨迹坐标
mousedown box
mousemove document
mouseup document
box.onmousedown = function (ev) {
var offsetX = ev.offsetX,
offsetY = ev.offsetY;
每次拖拽之前 对数组进行初始化
map.length = 0;
map.push({ x: 0, y: 0 });
document.onmousemove = function (ev) {
var pageX = ev.pageX,
pageY = ev.pageY;
var x = pageX - offsetX,
y = pageY - offsetY; 计算出坐标
var i = document.createElement(‘i’);
i.style.top = y + ‘px’;
i.style.left = x + ‘px’;
document.body.appendChild(i);
map.push({ x, y, i });
box.style.top = y + ‘px’;
box.style.left = x + ‘px’;
}
document.onmouseup = function () {
document.onmousemove = null;
console.log(map);
当鼠标松开时 获得数组中数据 让元素按坐标返回
var timer = setInterval(function () {
if (map.length) {
var lastPoint = map.pop(); 删除并返回数组中最后一个元素
box.style.top = lastPoint.y + ‘px’;
box.style.left = lastPoint.x + ‘px’;
lastPoint.i.remove();
} else {
clearInterval(timer);
}
}, 20);
}
}
}