可编辑div 图片在谷歌浏览器里面如何能实现单击选中

vue中 可编辑div 图片在谷歌浏览器里面如何能实现单击选中
火狐浏览器可以单击选中图片谷歌不能单击选中图片

用range对象选中图片,示例如下


<div id="app">
    <div contenteditable="true" style="border:solid 1px #ccc;height:200px;width:400px;outline:none" v-on:click="selectImg">
       aa <img src="https://avatar.csdnimg.cn/D/4/8/2_technologist_40_1621503911.jpg" />bb

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            selectImg(e) {
                var el = e.target
                if (el.tagName == 'IMG') {
                    var r = document.createRange();
                    var s = window.getSelection();
                    s.removeAllRanges();
                    r.selectNode(el);
                    s.addRange(r);
                }
            }
        }
    })

</script>

img

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632