Question

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

是否有针对此的CSS / HTML解决方案？或者还有其他任何可能是JS的解决方案吗？

例如，如果您想在以下示例中选择“想要选择此项。”。

HTML：

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

CSS：

a{
    display: inline-block;
    width: 10em;
    margin: 10px;
    padding: 10px;
    border: 2px solid #eee;
    text-decoration: none;
}

jsFiddle

我尝试将以下内容用于Google Chrome。但它不允许人们选择链接内的文本，只是禁用元素的拖动。

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

Answer 1

您可以向不希望选择的行添加<span>元素，然后应用-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>

反过来：

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

见jsFiddle demo。它适用于Chrome，但我无法在一分钟内测试其他浏览器。

Answer 2

有一种方法可以在JavaScript中实现这一目标。您可以使用跨度替换链接并处理mousedown，然后向上查看是否进行了选择，如果没有模拟链接单击。

DEMO ：http://jsfiddle.net/L8px2/2/

<强> CODE：

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
    }
});

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

2 个答案: