1

我是一名新的 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 Console中运行任何命令，或者即时更改CSS以禁用此行为吗？当然，只有当我知道这是如何实现的时候，我才能尝试这些改变。

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

4

1 回答 1

6

他们在打电话.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为noneor all，具体取决于应该或不应该选择的内容。起初我以为是因为 HTMLunSelectable属性，但在实际尝试之后，它似乎并没有做任何事情。也许这是一个IE唯一的事情。 user-select绝对有效。

于 2013-06-24T18:41:49.480 回答