javascript - 点击 div 下的 div

Question

我有情况：

<div id="main">
  <div id="a"></div>
  <div id="b"></div>
</div>

在我的网页上，元素B位于A. 如何仅将 click 绑定到 B 元素之上的那些 A 元素？例如：

$('#main, #main > #b').click(function(){
  //something
});

EDIT2：当我单击父 div 或“b”元素时，此代码是可以的，但是当我单击上面的“A”元素时没有任何反应。

一般来说，我只想点击 B 元素，但是当 A 元素高于 BI 时，我想触发事件。谢谢！

编辑：不幸的是我无法修改 HTML 代码。

Answer 1

看看这个，当我在你的问题中留下评论时，我制作了一个脚本来向你展示我使用 jquery 库的意思，例如，这里是链接

HTML：

<div id="main">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

CSS：

#main div{width:100px;height:100px;display:block;position:absolute;margin:10px;top:0;left:0;line-height:100px;text-align:center;}
#main #a{background:#DDD;top:5px;left:5px;}
#main #b{background:#999;color:#FFF;}

jquery脚本：

//onHover B do the next...
$('#b').hover(function(){

  // actual B element move below
  $(this).css('zIndex', -1);

});
//onHover A do the next...
$('#a').hover(function(){
  // nothing on hover
},function(){
  // but onHoverOut do next...
  $('#b').css('zIndex', 'auto');
});

Answer 2

我不知道你为什么要这样做，但尽管如此……</p>

$('#a').click(function(e) {
    e.preventDefault();
    $('#b').click();
});

Answer 3

也许这就是您正在寻找的：

HTML：

<div id="main">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>​

jQuery：

$(document).ready(function() {
    $("#main div").each(function() {

        // bind each div to the click event
        $(this).click(function() {
            alert("hah!");
        });

        // if we have reached "b", stop binding events to any following divs
        if ($(this).attr('id') == "b") {
          return false;
        }

    });
});

JSFiddle在这里：http: //jsfiddle.net/U6J8c/