在contextmenu右键事件上js模拟触发click,希望通过click事件获取焦点,但现象是执行右键选择完才获取焦点

我想实现右键功能,像qq这样,右键点击图片时,图片被选中,并通过css focus显示选中效果,如下图

clipboard.png


我想通过模拟click事件去触发这个效果,使得window.selection有选中内容,css也能有选中样式,但不管我是用click(),还是用dispathEvent事件触发。实现效果都是,选择完右键菜单项后,图片才获取焦点。
我是vue实现的,我的代码是:

// img 标签绑定@contextmenu="rightHandler"
// methods
   rightHandler(e) {
    e.target.click()
    // 或者这个方法
    // e.target.dispatchEvent(new MouseEvent('click', { 'bubbles': true }))
    this.showMenu() // 其他一系列操作
    }

如果直接用dispathEvent('click'), 能先获取焦点,再显示右键,但是会报错

clipboard.png
求大神们解救,万分感谢!

阅读 4.9k
2 个回答

在“EventTarget”上执行“dispatchEvent”失败:第一个参数不是“Event”类型

e.target.dispatchEvent(e.target.createEvent( 'click' ))

自行解决了,在e.target.click() 之后将显示菜单栏函数添加setTimeOut(), 30ms即可
感觉应该有更好的方法,如果有,请添加回答,我会采纳的,谢谢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题