Html 允许用户选择链接文本的一部分

是否可以允许用户在链接内单击并选择文本的某些部分？（在某些或任何现代浏览器中。）

有没有CSS/HTML解决方案？或者有没有其他的，也许是JS的解决方案

例如，如果要在下面的示例中选择“想要选择此”

HTML:

我试着在谷歌浏览器上使用以下内容。但它不允许用户选择链接内部的文本，只是禁用了元素的拖动

-webkit-user-select: all;
-webkit-user-drag: none;

您可以在不希望选择的行中添加

元素，然后应用

-webkit user select:none

例如：

<a href="#">
    <span class="no-select">Don't want to select this.</span>
    Want to select this.
    <span class="no-select">Don't want to select this.</span>
</a>

---

看这个。它可以在Chrome中运行，但我现在无法测试其他浏览器。

有一种方法可以在JavaScript中实现这一点。您可以将链接替换为跨距，并处理鼠标向下和向上，以查看是否进行了选择，如果没有，则单击模拟链接

演示：

代码：

var posX = -1, posY = -1;

$('a').each(function() {
    var a = $(this);
    a.replaceWith(
            $('<span />')
                .text(a.text())
                .attr({
                    href: a.attr('href'),
                    target: a.attr('target')
                })
                .addClass('selectable')
    );
});

$(document).on('mousedown', '.selectable', function(evt) {
    posX = evt.pageX;
    posY = evt.pageY;
});
$(document).on('mouseup', '.selectable', function(evt) {
    if(evt.pageX == posX && evt.pageY == posY) {
        alert('no selection. simulate click.');
        window.location.href = $(this).attr('href');
        // TODO: handle target attribute correctly
    }
});

var posX=-1，posY=-1；
$（'a'）。每个（函数（）{
var a=$（本）；
a、 取代(
$('')
.text（a.text（））
艾特先生({
href:a.attr（'href'），
目标：a.attr（'target'）
})
.addClass（“可选”）
);
});
$（document）.on（'mousedown'，'.selective'，函数（evt）{
posX=evt.pageX；
posY=evt.pageY；
});
$（document）.on（'mouseup'，'.selective'，函数（evt）{
if（evt.pageX==posX&&evt.pageY==posY）{
警报（'无选择。模拟单击'）；
window.location.href=$（this.attr（'href'）；
//TODO:正确处理目标属性
}
});

这样，我仍然无法在链接内单击并选择部分文本。用户想要选择的文本由用户决定，因此是任意的。@Qtax您希望如何单击链接而不让它带您去某处？那么不，您不能。我不明白你是如何期望文本由用户决定的，不过：/你能详细说明一下吗，因为你的问题特别指出了不应该突出显示的文本……单击就是单击（鼠标下移，最多可移动4次（至少在Windows上），最后在同一元素上单击鼠标）。它不涉及（“主要”）鼠标移动或文本选择。单击并拖动/选择不是单击，而是鼠标按下（在本例中是在元素内部），而鼠标向上则在“很远”的地方，可能完全在元素外部。+1。尽管我更好奇的是是否有一个无JS的解决方案。可能不会。是的，一个干净的CSS解决方案是最干净的。但是由于

-webkit user select

没有按应有的方式工作，这似乎非常困难。不幸的是，这破坏了

元素上的常见交互，如右键单击、Ctrl+单击和中键单击。并不是说我有更好的解决方案(

<a href="#">
    <span class="no-select">Don't want to select this.</span>
    Want to select this.
    <span class="no-select">Don't want to select this.</span>
</a>

span.no-select {
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

var posX = -1, posY = -1;

$('a').each(function() {
    var a = $(this);
    a.replaceWith(
            $('<span />')
                .text(a.text())
                .attr({
                    href: a.attr('href'),
                    target: a.attr('target')
                })
                .addClass('selectable')
    );
});

$(document).on('mousedown', '.selectable', function(evt) {
    posX = evt.pageX;
    posY = evt.pageY;
});
$(document).on('mouseup', '.selectable', function(evt) {
    if(evt.pageX == posX && evt.pageY == posY) {
        alert('no selection. simulate click.');
        window.location.href = $(this).attr('href');
        // TODO: handle target attribute correctly
    }
});