Question

我有一个绑定到onclick事件的父网格。然后我有一个图像，它绑定到自己的click函数。我点击这个时使用event.stopPropagation();来停止父div激活。

然后在子点击事件中，将出现一个带有文本框，组合框等的表单。该表单包含在div中。所以我也使用了事件传播，但它不起作用。我点击子表单时会触发父点击事件。

有解决方案吗？
HTML代码：

<div id="droppable" class="droppable">
</div>

脚本： //这是图片点击事件

$('.configClone'+count).on('click', function (event) {
      event.stopPropagation();

      $(this).addClass("selected"+attrId).parent().append('<div id="pop' + attrId + '" class="messagepop pop' + attrId + '"><form method="post" id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label><select><option value="volvo">Volvo</option><option value="saab">Saab</option></select></p></form><table border="0"><tr><td><font><b>Attributes</b></font></td><td></td><td><font><b>Assigned Attributes</b></font></td>'+
                        '</tr><tr><td><select id="cmdAllRoles" name="cmdAllRoles" size="6" style="height:100px; width:150px" class="fontDefault" MULTIPLE tabindex="20"></select></td><td valign="middle">'+
                        '<input type="button" id="btnAddRole" name="btnAddRole" value=">" onClick="selectDrag(3)" class="Button-nav" tabindex="15"><br><input type="button" id="btnAddAll" name="btnAddAll" value=">>" onClick="selectDrag(4)" class="Button-nav"><br><input type="button" id="btnRemoveAll" name="btnRemoveAll" value="<<" onClick="selectDrag(1)" class="Button-nav"><br><input type="button" id="btnRemove" name="btnRemove" value="<" onClick="selectDrag(2)" class="Button-nav"><br>'+
                        '</td><td><select id="cmdRoles" name="cmdRoles" size="6" style="height:100px; width:150px" class="fontDefault"></select></td></tr></table></div>');


    //trying to stop propagation from child div
     $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }


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

    alert(6);
 }

alert（6）在我点击动态表单时触发。

Problem2：我会编辑这个很容易解释。使用

 $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }

代码，现在我可以单击表单上的任意位置而不调用父单击。表格有一个组合框。但我无法点击组合框并立即查看结果列表。这是行不通的。我认为它是因为，我用上面的点击事件包装它。对此有何解决方案？

Answer 1

您也可以在子元素中使用event.stopPropagation();点击

$("#parent").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$("#child").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});

DEMO

我检查了你编辑过的问题。问题是，您正在动态创建标签。这些标签应该与代表绑定。

示例

$(document).on("click",".messagepop",function(event) { event.stopPropagation(); alert(5); });

Answer 2

您需要取消孩子点击事件的默认操作（导航）。为此，您必须使用

     event.preventDefault(); 
     event.stopPropagation();

在子元素

中

了解更多http://api.jquery.com/event.preventdefault/

如何在动态子窗体上单击时停止父单击触发

2 个答案: