给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 手指松开 样式依然不会被恢复
解决方案: 动态渲染样式,根据不同操作给出不同养的样式;