js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY

MouseEvent的类别有以下:

  1. mousedown 鼠标按下
  2. mouseup 鼠标释放
  3. click 左键单击
  4. dblclick 左键双击
  5. mousemove 鼠标移动
  6. mouseover 鼠标经过
  7. mouseout 鼠标滑出
  8. mouseenter 鼠标进入
  9. mouseleave 鼠标离开
  10. contextmenu 右键菜单

注意:

  • 执行顺序:mousedown —> mouseup —> click
  • 区别:mouseover和mouseout子元素也会触发,可以冒泡触发
  • 区别:mouseenter和mouseleave是针对侦听的对象触发,阻止了冒泡

阻止鼠标的默认事件

  • e.preventDefault()
  • e.returnValue=false;//IE8 及以下兼容写法
  • return false;//IE兼容写法,只用作on事件阻止默认事件

去除单击右键菜单

document.body.addEventListener("contextmenu",clickHandler);
function clickHandler(e){
    e.preventDefault();//阻止事件默认行为
    console.log(e.type);
}

阻止图像默认拖拽

var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
    e.preventDefault();
}

阻止文字的拖拽和选择

document.body.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
    e.preventDefault();
}

阻止表单提交及重设

var bn=document.querySelector("[type=submit]");
bn.addEventListener("click",clickHandler);
function clickHandler(e){
    e.preventDefault();
}

//或者对form来写
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){
    e.preventDefault();
    //e.returnValue=false;//IE8 及以下兼容写法
} 

MouseEvent对象

打印出MouseEvent对象内容:

document.body.addEventListener("mousedown",clickHandler);
function clickHandler(e){
    console.log(e);
}

打印结果如下(只截取了部分内容):
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第1张图片

  • altKey ctrlKey shiftKey metaKey 是否按键点击
  • button buttons which用来判断是鼠标的哪个键操作的
    左键对应的值为 0、1、1
    中键对应的值为 1、4、2
    右键对应的值为 2、2、3
  • timeStamp 从页面打开开始到触发事件的时间

以下内容为坐标值的说明:

clientX和clientY与x,y

  • clientX和clientY与x,y一样的,都是客户区域坐标,指鼠标的坐标,以浏览器显示区域的左上角开始,x,y是新浏览器支持

以下截图打印的结果都是div2元素的左上顶点(从边框开始)的位置坐标。
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第2张图片

offsetX,offsetY

  • offsetX,offsetY 针对目标元素的左上角坐标(e.target),下面截图中鼠标点击有误差,不影响结果。
    js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第3张图片

layerX,layerY

  • layerX,layerY 往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角

当元素及它的父级都没有定位属性时,以body的左上角为原点:
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第4张图片
当元素的父级都有定位属性时,以父级的左上角为原点:
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第5张图片
当元素自身有定位属性时,以自身的左上角为原点:
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第6张图片

pageX, pageY

  • pageX, pageY相对页面左上角的距离
    js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第7张图片

screenX screenY

  • screenX screenY 相对屏幕左上角的位置
    js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_第8张图片

总结:

  • clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持
  • offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。
  • layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角
  • pageX,pageY相对页面左上角的距离
  • screenX screenY 相对屏幕左上角的位置

你可能感兴趣的:(javascript)