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

Question

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

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

我首先寻找 user-select: none 尤其是。在 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() :

"Disabling text selection is bad. Don't use this."

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

(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 绝对有效。