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

我解决了它：

 $("#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 2

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

http://jsfiddle.net/5yTnx/

Answer 3

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

http://jsfiddle.net/LbcFj/

如何避免div的子节点的onclick事件

3 个答案: