在链接内的可内容块，如何防止重定向，但让文本选择的位置发生变化？

Question

这里是演示。http:/jsfiddle.netqh7Sq

我希望能够在链接内编辑跨度，其实我可以通过一些防止气泡传播的部分来阻止caret更改动作。

请不要建议使用不同的标记，只能使用javascript。

Answer 1

我想如果不把整个链接做成可编辑的，就不会有好的办法。

$('a').prop("contentEditable", "true");

演示： http:/jsfiddle.netqh7Sq1

Answer 2

我是这样做的。

1. 防止在contenteditables中点击默认值
2. 对于firefox来说，删除并添加href-attribute，以防止将光标放在contenteditable-element的开头。

https:/jsfiddle.nete15j8oq91

// if contenteditable inside a link
document.addEventListener('click', e=>{
    if (e.button !== 0) return;
    if (e.target.isContentEditable) {
        e.preventDefault();
    }
    if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
        e.preventDefault();
    }
});

// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
    if (!e.target.isContentEditable) return;
    var link = e.target.closest('a');
    if (link) {
        const href = link.getAttribute('href')
        link.removeAttribute('href');
        setTimeout(()=>link.setAttribute('href', href))
    }
});