javascript - Jquery .remove 事件仅针对父级而不是子级

Question

<script>
$(".alert").click(function(){
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
});
</script>

<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>   

所以上面的代码工作得很好，只是我需要让它让用户可以选择文本区域内的文本。此时从逻辑上讲，当他们单击文本区域(因为它包含在 .alert 中)时，它会立即与 div 一起被删除。

我无法从 div 中删除文本区域，因为我需要它既包含在 div 中，又需要在单击 div 的其他部分时删除。

那么我如何才能从其包含的 div 的点击事件中明确排除文本区域，同时仍然允许包含的 div 的点击事件删除文本区域。

Answer 1

您可以通过阻止 click 事件从 textarea 传播(冒泡)到 div 来实现此目的:

$(".alert textarea").on("click", function(e) {
    e.stopPropgation();
});

示例:

$(".alert").click(function(){
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
});
$(".alert textarea").on("click", function(e) {
  e.stopPropagation();
});

<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，在现有处理程序中，检查事件是否通过 textarea:

$(".alert").click(function(e){
  if (!$(e.target).closest("textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});

示例:

$(".alert").click(function(e){
  if (!$(e.target).closest("textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});

<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，第二个依赖于这样一个事实:您的 .alert 元素永远不能位于另一个 textarea 中，因为要素。一般情况下是行不通的。这可以，但很痛苦:

$(".alert").click(function(e){
  var $t = $(e.target);
  if (!$t.is("textarea") && !$t.parentsUntil(this, "textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});