Question

我是一名新的Web开发人员，我喜欢研究各种网站如何实现奇怪的功能。我遇到了以下网页：http://www.catholicmatch.com/forums/topics/posts.html?post_id=4664556#_jump_here

首先，我很好奇他们如何设法禁用所有选择。这非常令人印象深刻。他们是如何做到的呢？

我首先寻找user-select: none esp。在body元素和其他地方，我找不到它。然后我查找了jquery.disableSelection()的来电。似乎$(document).ready()中有一个，但它似乎适用于一个小子集，即仅适用于某个类的情况。我真的很好奇这些人是如何实现禁用选择的，因为即使 Ctrl + A 似乎也不起作用。在我正在研究的网站上这很好。

相反，我很好奇是否有办法禁用此行为。例如，我使用FireBug。是否可以在 JavaScript控制台中运行任何命令，或者动态更改 CSS 以禁用此行为？当然，只有一次我知道如何实现这一点，我才能尝试这些变化。

我会感激任何帮助。我正在使用FireFox和Chrome中最新的浏览器。

Answer 1

他们正在呼叫.disableSelection()。他们只是没有按照你的措辞来调用它。以下是网站来源的直接复制/粘贴。

第629行，如果您点击“查看来源”

$(document).on('click', '.thumbActions button', thumbHandler).disableSelection();

Check out this part of the documentation on .disableSelection()：

“禁用文字选择很糟糕。请勿使用此功能。”

以下代码（也直接来自网站的源代码）应该使其实际工作方式更加明显。

(function($){
    $.fn.disableSelection = function() {
        return this.attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
    };
    $.fn.enableSelection = function() {
        return this.attr('unselectable', 'off').css('user-select', 'all').on('selectstart', true);
    };
})(jQuery);

将CSS规则user-select设置为none或all，具体取决于应该或不应该选择的内容。起初我认为这是因为HTML unSelectable属性，但在实际尝试之后它似乎没有做任何事情。也许它只是一个IE浏览器。 user-select肯定有用。

调试并绕过禁用网页上的文本选择

1 个答案: