cursor: not

鼠标点击事情

今日刚开始做了一个要求，便是鼠标点击点一下后，会出现一个实际操作框

如今来为大家说一下我完成流程吧~

1.监视

最先，给全局性全部监视，这是监视鼠标事件（左右键都是会开启）

document.addEventListener ('mousedown', this.showMousePosition, false);

2.处理程序目标

之后在这一事件对象里，有一个button特性，它相当于2时，就证明是鼠标右键，又把现阶段点一下鼠标右键后的pageX和pageY给搜集了，正常情况下这儿还得有个自变量（就叫做isShowOpeaBox吧）来调节实际操作框表明，, 由于我这儿结构复杂，要在3d渲染引擎上面的，我在别处控制住了

正常情况下的事例，我在这里填补下：

showMousePosition(e) {   
   if(e.button == 2) {
       this.isShowOpeaBox = true
        this.mouseLeft = e.pageX         
        this.mouseTop = e.pageY    
     } else {
      this.isShowOpeaBox = false
   } 
},

3.html css相互配合

之后在html标签和款式中这么写，就能实现，点一下鼠标右键，提示框表明

4.进行

然后你完成了总体作用，只需在点一下实际操作框中元素时，使其掩藏掉就ok

鼠标样式

这算是一个细节，可是一但留意到，会总体提升pc端网址的总体交互感哦~

所谓鼠标样式，便是客户在浏览网页时，电脑鼠标放进去后的鼠标的模样，大多数一般原素默认都是一个小箭头，大家能够改变css中 cursor特性，来并对款式开展更改，下面为大家介绍好多个常见的：

cursor: pointer

是小手手，一般都是点一下这一原素后，都有什么功能用了这一

cursor:move

这一原素能够进行拖拽什么的，就拿这一

e-resize 此鼠标光标标示矩形边缘可以被往右边（东）挪动。

ne-resize此鼠标光标标示矩形边缘可以被往上及往右边挪动（北/东）。

nw-resize此鼠标光标标示矩形边缘可以被往上及往左边挪动（北/西）。

n-resize此鼠标光标标示矩形边缘可以被往上（北）挪动。

se-resize此鼠标光标标示矩形边缘可以被往下及往右边挪动（南/东）。

sw-resize此鼠标光标标示矩形边缘可以被往下及往左边挪动（南/西）。

s-resize此鼠标光标标示矩形边缘可以被下移（南）。

w-resize此鼠标光标标示矩形边缘可以被往左边挪动（西）。

上边一堆resize，常用便是截屏，但是一般截屏会用第三方工具，人家还写完了~

cursor: not-allowed

这是禁止使用，让消费者一看都清楚这一原素他点不了，一般相互配合角色权限应用