Jquery：如何在加载时禁用图像的单击功能？

Question

这将无法使用：

$('div#menuBar,#goLeftBtn,#goRightBtn').attr('disabled', true);

在document.ready

有任何想法吗？ 谢谢！

编辑：
我的HTML基本上是这样的：

  <div id="floatRight">
       <img src="./images/all_left.png" id="goAllLeft" class="arrow" />
       <img src="./images/left.png" id="goLeft" class="arrow" />
       <img src="./images/right.png" id="goRight" class="arrow"/>
       <img src="./images/all_right.png" id="goAllRight" class="arrow" />
    </div>

我知道那些不是上面jquery代码中的确切图像名称，但这就是我的所有img基本上是如何设置的，对于那段特定的代码我只需要禁用那些img。

Answer 1

而不是在加载时尝试禁用，您可以不加载单击事件，直到文档加载？

如果这些都是未被锚标记包装的图像，您可以轻松完成此操作。

<img id="menuBar" />
<img id="goLeftBtn" />
<img id="goRightBtn" />

目前没有绑定的点击事件，所以没有什么可以禁用

<script type="text/javascript">
    $(function(){
        $("#goLeftBtn").click(function() { /* go left */ });
        $("#goRightBtn").click(function() { /* go right */ });
        $("#menuBar").click(function() { /* go menu? */ });
    });
</script>

如果您将这些包装在锚标记中，则无法调用e.preventDefault来停止发生单击事件，因为页面未完成加载且未绑定jQuery事件。

---

如果你将你的点击事件内联（可能不是一个好主意），那么：

<img id="menuBar" onclick="return DoMenuStuff();" />
<img id="goLeftBtn" onclick="return GoLeft();" />
<img id="goRightBtn" onclick="return GoRight();" />

你总是可以这样做：

<script type="text/javascript">
    var loaded = false;
    $(function(){
        loaded = true; // page done loading
    });

    function DoMenuStuff()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoLeft()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoRight()
    {
        if(loaded) { /* do stuff */ }
    }
</script>

Answer 2

$('div#menuBar,#goLeftBtn,#goRightBtn').click(function() { return false; });

一直工作，直到你准备好激活它。

或者实际上为什么你不加载点击事件直到它被加载？

Answer 3

这实际上可以工作，这意味着这将为#menuBar ， #goLeftBtn和#goRightBtn添加一个disabled属性。
不幸的是，这对于event handler没有帮助，因为<img>不能变为“ disabled ”。

所以你需要删除/取消绑定处理程序本身。 这又取决于你如何绑定click事件。 如果你使用jQuery ，你可以使用.unbind() 。

如果您使用的是inline event handler ，则需要删除或修改它，以防止执行单击处理程序。

Answer 4

您可以在页面上放置一个<div> ，绝对定位以覆盖整个视口，并使其透明，但可以使用大的z-index显示。 这应该阻止所有点击进入真正的页面元素。 在你的文档“加载”处理程序中，使“shroud” <div>消失（或使其成为“display：none”）。