javascript - 在 jQuery 中禁用(不可点击的)背景内容

Question

我有两个 div，一个是 absolute 位置。
这是一个代码。

<input type="button" onclick="showdiv()" value="show" >
<div id="div2" style="display:none"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>
<div id="div1"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>

这里是 jquery 代码。

function showdiv(){
   $('#div1').fadeTo("slow",0.15);
   $('#div2').show();   
}

当我点击 show 按钮时，它 fadeTo div1 并显示 div2。但问题是 div1 链接和按钮也可以点击，而 div2 的链接和按钮不能点击。
如何禁用后台链接。

Answer 1

$('#div1').unbind('click').click(function(e){
   e.preventDefault();
});

如果直接在#div1 上有任何onclick-listeners 就可以完成。在较新的 jquery 版本中你可以这样做

$('#div1').off('click').click(function(e){
   e.preventDefault();
});

但话又说回来，我根本不推荐这样的解决方案，而是宁愿使用位于 #div1 之上的透明 div 来解决这个问题。

例子:

<div id="div1holder" style="position:relative">
  <div id="div1">
  </div>
  <div id="div1blocker" style="display:none; position:absolute;top:0; left:0; background:transparent;">
  </div>
</div>

让 #div1blocker 表现得像 #div1 并在需要时调用 $('#div1blocker').show()阻止它。

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
}

当然，你仍然可以使用淡入淡出:

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
  div1.fadeTo("slow",0.15);
}