Question

我有一个重度jquerized页面，其中包含一些链接，各种用户输入等。

我使用jquery，在

中定义了动作

$(document).ready( function() {
  ....
} );

块。

但是当页面加载（或者更糟糕的是 - 重新加载），并且用户点击链接时，会触发来自它的href操作，因为javascript尚未加载/活动。

我想以某种方式阻止它。我想到的一种方法是在整个文档上放置一个透明的div，它将接收click事件而不是它下面的层。然后，在javascript中的.ready函数中，我可以隐藏该div，从而可以使用该页面。

这是一个好习惯吗？或者我应该尝试一些不同的方法？

Answer 1

另一个选择是使用jQuery BlockUI plugin（可能在幕后使用相同或类似的想法）。

Answer 2

如果您不希望您的链接像链接一样（即他们的href永远不会被遵循），为什么要首先将它们链接起来？通过将可点击元素设为div或span（没有默认操作的内容），并按照正常情况附加点击处理程序，您可以获得更好的服务。

我真的建议不要使用div阻止ui - 这似乎是完全错误的方法，使得页面对于禁用JS的人不起作用，以及阻止其他常见任务，如复制文本。

根据澄清，只有在启用了JS但尚未加载的情况下才阻止UI，我建议如下。

HTML（body之后的第一件事）：

<script type="text/javascript">document.write('<div id="UIBlocker">Please wait while we load...</div>')</script>

CSS：

#UIBlocker 
{ 
    position: fixed; /* or absolute, for IE6 */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

或者，如果您不想使用document.write，请将UIBlocker div保留为body顶部的直接HTML，但在head中有以下内容

HTML：

<noscript>
    <style type="text/css">
        #UIBlocker { display: none !important; }
    </style>
</noscript>

这将确保它不会阻止非JS启用的浏览器

Answer 3

透明div可以正常工作，假设它位于一切之上。（我从来都不清楚元素接收点击事件的可见性。）

您可能希望div可见;如果访问者可以看到页面上的所有内容，而不是点击它，那么访问者可能同样会感到困惑。

您可能需要使用JavaScript来使div与页面一样高。

Answer 4

叠加DIV应该有效。另一种选择是将所有内容放在隐藏容器visibility: hidden中，然后切换到visible作为最后一个$(document).ready语句。

Answer 5

正如你自己说的，javascript尚未加载。也许css也没有加载。

因此，我认为使用视觉元素的东西是行不通的。如果你想用viaual元素（css）做一些，你必须在html节点<tagname style="blabla">

中对其进行硬编码

当加载js时，您可以在稍后的体育场中添加href行为。

你得到的是一个带有标题的<span>，这应该设置行为或其他东西。我使用了标题，但可以是不同的属性。

这不使用任何jquery，仅用于加载

    $(document).reade(function () {
        relNoFollow();
    });

function relNoFollow() {
    var FakeLinks = document.getElementsByTagName('span');

    if( FakeLinks.length > 0 ) {
        for( var i = 0; i < FakeLinks.length; i++ ) {
            if( FakeLinks[i].title.indexOf( 'http://' ) != -1 ) {
                FakeLinks[i].onmouseout     = fakelinkMouseOut;
                FakeLinks[i].onmouseover    = fakelinkMouseOver;
                FakeLinks[i].onclick        = fakelinkClick;
            }
        }
    }
}

function fakelinkMouseOver() {
    this.className = 'fakelink-hover';
}

function fakelinkMouseOut() {
    this.className = 'fakelink';
}

function fakelinkClick() {
    window.location.href = this.title;
}

如何在使用jQuery加载页面时禁用用户输入？

5 个答案: