前端|JavaScript 事件 -- 默认行为，限制范围拖拽浏览器|javascript

1. 默认行为

浏览器自带行为，比如，一个空白网页，右击，会出现一个框，提供很多选项，这个弹框就是默认行为，a标签，点击会跳转，这也是默认行为，有时候，阻止默认行为是为了提供自定义的行为
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单

zns - 锐客网

2. 阻止默认行为

需求：阻止默认的右键菜单行为，并提供自定义的菜单，当然了，你点击那里，自定义菜单就得出现在哪里

GuoYu - 锐客网 menu1 menu2 menu3 menu4

当然了，还是那个问题，凡是牵涉到clientX/Y的时候，都得考虑到被卷走的部分，scrollTop和scrollLeft，因为当网页文档不止一屏大的时候，一旦网页卷走一部分，自定义菜单就不能紧跟鼠标了，因为忽略了被卷走的部分

function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:sl+ev.clientX, y:st+ev.clientY}; }

GuoYu - 锐客网 menu1 menu2 menu3 menu4

需求：只能输入数字的文本框【input】，阻止默认行为

GuoYu - 锐客网

return false; 禁掉了所有的按键，但我们要保留数字键

GuoYu - 锐客网

拖拽

需求：鼠标按下div，移动拖拽

GuoYu - 锐客网

上面的代码有个很大的问题，所有的事件都是加在oDiv，一旦鼠标滑动过快，跑出div的范围，那么，div就不会随着鼠标到处跑了解决方案就是onmousemove事件需要加在document上,如下：

GuoYu - 锐客网

但是，上面仍然有问题，当你按住div拖到浏览器边缘，鼠标都溢出浏览器到达桌面上了，移动鼠标，div仍然跟着动，而且当鼠标在浏览器客户区之外弹起之后，再挪进浏览器客户区，即使不按下去移动，div也会跟着跑，把onmouseup事件加在document上

GuoYu - 锐客网

以上在Chrome上没问题，但是在火狐上会出问题：一个空的div，拖动，没问题，松手，再拖动，拖出一个鬼影（出现两个红色div，见鬼了，而且第二个div还能被拖出客户区，到地址栏上），如果红色div内加个文字就好了，怎么解决FireFox的这个bug？这个鬼影其实是火狐的一个默认事件，需要阻止，在onmousedown事件上阻止，因为这个事件是拖拽行为的开始，鼠标按下的瞬间，拖拽就开始了