浏览器的默认行为

一.浏览器的默认行为

1.默认行为的概念

默认行为是指事件本身具有的行为，如a标签可以跳转，文本框可输入文字，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

浏览器的默认行为会影响到开发，可以通过事件对象下面的属性和方法阻止浏览器的默认行为。

event.preventDefault(); 标准浏览器阻止默认事件。

event.returnValue = false; 非标准浏览器（IE8）阻止默认事件,标准也可以使用

return false; 退出执行, 所有触发事件和动作都不会被执行. 可以用来替代 preventDefault.

小例子:阻止浏览器的默认行为

// var link = document.querySelector(‘a’);

// link.onclick = function(e) {

// e.preventDefault();

// };

oncontextmenu:右键事件

// document.oncontextmenu = function(e) {

// e.preventDefault();

// e.returnValue = false;

// return false;

// }

二.拖拽图片

限制图片不能跑出可视区。

documentElement：返回当前元素节点的文档。

常用方法：document.documentElement //返回HTML的根节点，即 HTML 。

这个用法和 document.body 的区别是， document.body 返回的是 dom 中的 body 节点。

clientWidth,clientHeigth ，元素可见区的宽高

当我们在移动的时候使用e.offsetX/e.offsetY这两个属性时，会意外出现移动块重复回到左上角的问题，这是因为在移动的时候，mousemove事件触发的事件源元素在不断切换，当鼠标移动时会移动到div中这时 offset的源元素不再是父级的div而是移动的div，这时offset值是相对于移动的div 所以是较小的值 ，所以会回到左上角。除了换成client之外，还可以在一定元素上加上一个css的样式 pointer-events: none;这个属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。这样该元素就不会出发触mousemove事件了。原文链接：https://blog.csdn.net/q970654226/article/details/80282838

用client实现的拖拽

用offset实现的拖拽