为什么在禁用文档后不能重新启用文档中的元素

Why cant I re-enable an element in a document after disabling the document?

本文关键字：文档 启用 元素 为什么 不能 新启用      更新时间：2023-09-26

在禁用文档选择后，我在表中获取大量输入以允许选择时遇到了真正的问题。我不想要可怕的蓝色选择范围（我正在使用css设计我自己的选择范围）。所以我想去掉它。但我需要在某些输入上启用选择。唯一的问题是，当我禁用文档上的选择，然后尝试在文档中不起作用的地方重新启用inouts时。单独禁用对表格单元格的选择不能正常工作，有时你会意外地选择一系列单元格。。。

UPDATE：这是专门针对IE的。我基本上想禁用所有高亮显示，或者最坏的情况下禁用表的所有高亮显示。然后我想在某些单元格中启用高亮显示。我正在创建一个电子表格应用程序。我不想要蓝色的。我想控制突出显示的内容。如果以上内容不清楚，很抱歉。

希望有人能帮忙。。。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="/Content/Fiddle.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-ui-1/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <h2>Javascript Fiddle</h2>
            <script>
            jQuery(document).ready(function () {
                disableSelection(document.body);
                //enable certain elements
                var selectableElements = jQuery('.highlightable');
                jQuery.each(selectableElements, function (key, value) {
                    enableSelection(this);
                });
            });
            function disableSelection(target) {
                if (typeof target.onselectstart != "undefined") //IE route  
                {
                    target.onselectstart = function () {
                        return false;
                    };
                }
                else if (typeof target.style.MozUserSelect != "undefined") //Firefox route                  
                    target.style.MozUserSelect = "none";
                else //All other route (ie: Opera)                  
                    target.onmousedown = function () { return false; };
                try {
                    target.style.cursor = "default";
                }
                catch (ex) {
                }
            }
            function enableSelection(target) {
                if (typeof target.onselectstart != "undefined") { //IE route                  
                    target.onselectstart = function () {
                        return true;
                    };
                }
                else if (typeof target.style.MozUserSelect != "undefined") //Firefox route                  
                    target.style.MozUserSelect = "none";
                else //All other route (ie: Opera)                  
                    target.onmousedown = function () { return false; };
                target.style.cursor = "default";
            }
            </script>
            <div id="tableHolder">
                <table>
                    <tr><td>abc 12 3</td><td class="highlightable"><input id="testSelection" value="dblClickMe" type="text" /></td></tr>
                    <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr>
                    <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr>
                    <tr><td>abc 12 3</td><td><input class="highlightable" type="text" /></td></tr>
                </table>
            </div>
            <script src="/Scripts/Fiddle.js" type="text/javascript"  ></script> 
        </div>
    </body>
</html>

您可以使用CSS为某些浏览器执行此操作：user-select:none；。由于您已经在使用jQuery，我可以提供我在jQuery.contextMenu中使用的这段代码（根据您的需要进行修改）：

function abortevent(e){
    e.preventDefault();
    e.stopImmediatePropagation();
};
if($.browser.msie) {
    $(document).on('selectstart.disableTextSelect', 'td', abortevent);
} else if(!$.browser.mozilla) {
    $(document).on('mousedown.disableTextSelect', 'td', abortevent);
}
相关文章：