jquery - 如何避免 div 子级的 onclick 事件

Question

单击后，我将移动一个 DIV，这很有效。但是 DIV 包含表单元素，并且在单击它们时也会发生操作，这是我不想要的。

我尝试向 DIV 的所有子级添加一个函数，该函数被调用，但父级 onclick 仍被触发。

$("#ControlPanel").click(function() {          
  switch ( $(this).css("top") )
  {
    case "0px":
      $(this).animate({ top: "-100px" });
      break;
    case "-100px":
      $(this).animate({ top: "0px" });
      break;
  }    
});

$("#ControlPanel").children().click(function() { alert(1); return; });

Answer 1

.children().click(function(event){
    event.stopPropagation();
});

http://jsfiddle.net/LbcFj/

Answer 2

我解决了它：

 $("#ControlPanel").click(function(event) {   

            if ( event.target == "[object HTMLDivElement]") {

                switch ( $(this).css("top") )
                {
                    case "0px":
                        $(this).animate({ top: "-100px" });
                        break;
                    case "-100px":
                        $(this).animate({ top: "0px" });
                        break;
                }    
            }
        });

Answer 3

您只需要停止通过 DOM 传播的点击事件，这可以使用该stopPropagation()方法来实现。请参阅此 jsfiddle 来演示：

http://jsfiddle.net/5yTnx/