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

Question

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

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

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

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

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

Answer 1

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

如果单击"查看源",则行629

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

查看以下文档的这一部分.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绝对有效.