事件修饰符

给button 增加touch 事件

@mousedown.native.prevent
@mouseup.native.prevent
@touchstart.native.prevent
@touchend.native.prevent

如 element UI button 组件

长按持续下发指令

.native 增加原生时间

.prevent 阻止浏览器默认事件，防止长按弹出右键菜单；

事件触发时机

mousedown

鼠标（左键、右键都支持）按下及触发，同click 不同

click

按下并松开鼠标左键，右键不会触发

mouseup

松开鼠标 （左右键都可）

可以结合定时器，使用mousedown和mouseup 开发长按操作；

三者（mousedown、mouseup、click）的触发顺序：

在同一元素按下并松开鼠标 左键  回依次触发 mousedown-》mouseup -> click

                                             右键 不会触发click 事件

修饰符 stop、slef、prevent、once、capture、passive .native

.stop 阻止自身冒泡行为，不让当前元素的事件继续往外触发。只有当前的元素会被触发，其他向上冒泡的元素全部不会触发，从自身开始不向上冒泡；

.self 只有自己触发时才会被触发，即便接收到内部的冒泡 事件 也会忽略， 也不会会阻止冒泡事件向上传递；

.prevent 阻止事件本身行为，如阻止超链接点击跳转，form表单点击提交。一些标签自身带有默认事件，比如a[href="#"]，button[type="submit"]， 这种标签在冒泡结束会开始执行默认事件，默认事件在冒泡后开始执行，但是不会因为.stop 阻止事件传递而终止

.once 事件只会执行一次，.click.prevent.once 表示只阻止一次事件的默认行为，当第二次出发的时候 事件本身的行为会执行

.capture 是改变js 默认行为的事件机制，默认时冒泡， 其会将冒泡改为捕获

.passive 滚动事件的哦人行为（滚动）将会立即触发，而不会的等待onScroll完成。提升移动端性能，每次滚动都会有哦一个默认事件被触发，告诉浏览器，不需要再去查询，不需要触发这个默认事件；

.native 父组件给子组件绑定一个原生的事件，将子组件编成普通的html标签，不加则无法触发，譬如elemnt ui组件的buttonz组件的mouse事件

注意： .passive和.prevent 不能一起使用，.prevent将被忽略。

在使用过程中，主要是移动终端可触屏操作的，使用.prevent 阻止浏览器弹出右键或长按弹出浏览器菜单，但是会影响css 样式 伪元素:active 生效，但是在pc 端 mouse事件下确实正常的（此时使用的鼠标左键），右键同touch 事件效果一致，导致:active 异常

具体现象：

touch 终端点击 虽然阻止了长按 浏览器右键菜单显示 但是伪元素:active 不生效了

pc端鼠标右键 长按 :active 开始生效，在松开时右键菜单弹出且样式不会恢复原来样子，除非关闭右键菜单

左键正常交互

使用@contextmenu.prevent 直接拦截右键，但是:active 使用的样式 pc端 右键 需要移除鼠标之后才可以恢复，touch 手指松开 样式依然不会被恢复

解决方案： 动态渲染样式，根据不同操作给出不同养的样式；