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>

所以上面的代码完美无缺，除了我需要创建它以便用户可以选择textarea中的文本。此时逻辑上，当他们点击.alert所包含的textarea时，它会立即被div删除。

我不能从div中删除textarea，因为我需要它包含div，并在单击div的其他部分时删除。

那么如何才能从包含div的click事件中专门排除textarea，同时仍允许包含div的click事件删除textarea。

Answer 1

您可以阻止click事件从textarea传播（冒泡）到div来执行此操作：

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

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，由于元素的性质，第二个元素依赖于.alert元素永远不会 in 另一个textarea这一事实。它不会在一般情况下工作。这会，但这很痛苦：

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

Answer 2

您也可以使用not选择器执行此操作：

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

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

看到这个小提琴：https://jsfiddle.net/zLq6dztu/

Jquery .remove事件仅在父母而不是孩子身上

2 个答案: