jQuery：仅单击此元素

Question

在上面这张极具艺术性的绘图中，绿色方块是粉色方块的子项。粉色的方块通过我的功能包裹在绿色的方块周围，因此绿色方块可以是任何东西 - 超链接、图像、按钮等。

我只想捕获粉色 div 上的点击（仅当它不是点击时）绿色元素也是如此。

这可以通过在绿色方块上使用 mouseenter 翻转布尔值来完成，但这对我来说似乎是一种混乱的方法。

有什么线索吗？

重要编辑：我根本不能弄乱绿色方块，所以不要向点击事件添加任何内容。

Answer 1

你可以这样做：

$('.pink-box-selector').click(function(e) {
    if ($(e.target).is('.pink-box-selector')) {
        // do stuff here
    }
});

Answer 2

两个选择。您可以首先检查目标是否是绿色 div。

$('#pinkdiv').click(function(e) {
  if ($(e.target).is('#greendiv')) return;
  // handle the event
});

或者，您可以正常为粉色 div 编写点击处理程序，并停止传播绿色 div 上的点击。

$('#greendiv').click(function(e) {
  e.stopPropagation();
});

Answer 3

$("#div_id :not('#excluded_element')).click(); 有帮助吗？
http://api.jquery.com/not-selector/

Answer 4

为“绿色”元素设置一个单独的点击事件侦听器，并让它 event.preventDefault()

Answer 5

http://jsfiddle.net/rlemon/d8qVp/

$("#pink").click(function(){
    if(!$("#green").is(":hover")) {
        alert('here');   
    }
});