Microsoft Edge视觉搜索致Angular应用图片拖拽失效求助
Edge 120+版本Visual Search导致图片拖拽失效的解决方案求助
自Microsoft Edge 120版本起,Visual Search功能的更新导致我的Angular Web应用内的图片拖拽功能失效。我已给img元素设置draggable="true"属性:快速拖动鼠标时功能正常,但正常操作下,一旦图片右上角出现Visual Search图标,整个图片的拖拽功能就会失效。
手动在Edge设置中关闭Visual Search可解决问题,但无法要求所有访客都这么操作;Chrome等其他浏览器无此问题。我已通过Edge三点菜单提交反馈,且Beta版122也存在该问题,因此不认为这是Bug。尝试用pointer-events: none;隐藏图标,但拖拽仍失效。
有没有程序化方法让Edge为我的应用完全禁用Visual Search,或告知Edge该图片需支持拖拽?(出于可访问性考虑,不想用背景图片替换img元素作为临时解决办法)
复现示例更新
- 测试域名:
http://test123.local/ - HTML代码:
<!DOCTYPE html> <html title="MicrosoftEdgeVisualSearch" lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MicrosoftEdgeVisualSearch</title> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("data", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("data"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the image into the rectangle:</p> <div style="width: 350px;height: 350px;border: 1px solid black;" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <img id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" draggable="true" ondragstart="drag(event)" width="350" height="350"> </body> </html>
- 复现条件:
- 非localhost/IP/stackblitz域名
- 图片尺寸需大于约180px
- 使用Microsoft Edge默认设置
更新2
最初未附上效果动图,现在尝试复现发现功能已恢复,推测Edge已推送更新。以下动图供后续问题重现时参考:
- 正常状态:

- 异常状态:

内容的提问来源于stack exchange,提问作者JIT Solution
相关产品推荐
相关产品推荐

