javascript - 如何向 DIV 添加点击属性而不将其应用于其中的元素？

Question

我有一个 DIV，单击时会展开以显示一些输入和按钮，再次单击时会关闭，隐藏这些元素。我遇到的问题是，当我单击按钮或输入框时，关闭动画无论如何都会发生。我知道我可以通过从 DIV 中取出输入和按钮来解决这个问题，但 DIV 对于它们的格式和组织非常重要。任何帮助都会很棒，谢谢!

html:

<div id='inputArea1' class='inputAreas'>
   <input id='email' class='evInput' placeholder='example@gmail.com'>
   <input id='comf' class='evInput' placeholder='Comfirmation Code'>
   <button id='sndCde' class='evBut'>Send Code</button>
   <button id='comfBut' class='evBut'>Comfirm</button>
</div>

JS:

var main = function() {
  $('.box').click(function() {
    var el = $(this);
    if (!el.hasClass('selected')) {
      el.animate({
        "height": "300px"
      }, 200)
      el.addClass("selected");
      el.find('.inputAreas').show();
    } else {
      el.animate({
        "height": "85px"
      }, 200);
      el.find('.inputAreas').hide();
      el.removeClass("selected");
    }
  })
}
$(document).ready(main);

完整代码:https://jsfiddle.net/dL2vzga0/

Answer 1

event.stopPropagation(); 可以完成这项工作:

$('#inputArea1').click(function(event){
  event.stopPropagation();
});

Fixed Fiddle