jQuery禁用父级触发器，当点击儿童

Question

在网站上我有一个div是一个点击区域。点击此区域时，应打开模式，并且必须在模式中输入视频网址。点击确定，视频将被添加到列表中，该列表也位于点击区域内。

现在，当在“白色”空间中单击某处时，模式应该再次打开。但点击图像（或删除链接），不应打开模式。不幸的是，主div上的点击事件总是被触发。

我试着用event.stopPropagation()来解决这个问题，但就我用它的方式来说，我无法完成这项工作。我将如何能够实现这一点。

代码片段是我正在做的简化。只需点击点击区域，然后点击“添加”。这会将图像添加到点击区域。你可以继续这样做。但点击图片或删除不应打开模式。点击删除应该触发删除操作。

var $videoModal = $('#videoModal'); 
 
var $videoSrc = $('#video-src'); 
 
var $videoSortable = $('#videoSortable'); 
 
var $videoModalOk = $('#videoModalOK'); 
 

 
$('.video-clickzone').click(function() { 
 
    $videoModal.modal('show'); 
 
}); 
 

 
$videoModalOk.click(function() { 
 
    $videoSortable.append("<li id='lyON3M9P3eU'><img src='http://img.youtube.com/vi/lyON3M9P3eU/0.jpg' width='200' data-video='https://www.youtube.com/embed/lyON3M9P3eU'><div class='text-center' data-video-delete='lyON3M9P3eU'>Delete</div></li>"); 
 
    $videoModal.modal('hide'); 
 
    $('.ck-message').hide(); 
 
}); 
 
$('[data-video-delete]').click(function(e) { 
 
    $('#' + $(this).data('video-delete')).remove(); 
 
});

.video-clickzone { 
 
    min-height: 150px; 
 
    border: 2px dashed #dddddd; 
 
    background: white; 
 
    padding: 20px 20px; 
 
} 
 
.video-clickzone:hover { 
 
    cursor: pointer; 
 
} 
 
.video-clickzone .ck-message { 
 
    text-align: center; 
 
    margin: 2em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="video-clickzone"> 
 
    <div class="ck-message"> 
 
    <div> 
 
     <i class="fa fa-video-camera fa-5x"></i> 
 
    </div> 
 
    Click to add video 
 
    </div> 
 

 
    <ul id="videoSortable" class="list-unstyled list-inline"></ul> 
 

 
</div> 
 

 
<div class="modal bs-example-modal-md" id="videoModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-md"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header bg-primary"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
 
     </button> 
 
     <h4 class="modal-title">Add video</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>This is just an example, click on 'Add'</p> 
 
     <div class="form-group" id="video-form"> 
 
      <label class="control-label" for="video-src">Video URL</label> 
 
      <input type="url" id="video-src" class="form-control"> 
 
     </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" id="videoModalOK" data-actie="">Add</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您需要附加一个事件被点击的图像时，你可以将它们当你正在构建的图像HTML或因为它是在我的片段，您可以使用jQuery上事件并绑定图像上的所有点击。基本上，您将所有点击附加到您的视频图像容器中的li选择器，并在该事件中触发event.stopPropagation以防止冒泡事件，因此点击未到达div。注意，如果你点击了图像或链接，这将触发相同的事件，所以你可能想要在dom中创建不同的选择器（一个用于图像，另一个用于删除链接），这样你可以更轻松地处理删除事件。

var $videoModal = $('#videoModal'); 
 
var $videoSrc = $('#video-src'); 
 
var $videoSortable = $('#videoSortable'); 
 
var $videoModalOk = $('#videoModalOK'); 
 

 
$('.video-clickzone').click(function() { 
 
    $videoModal.modal('show'); 
 
}); 
 

 
// This is the new function 
 
$('.video-clickzone').on("click", "li", function(evt){ 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 
}) 
 
// end of new code 
 

 
$videoModalOk.click(function() { 
 
    $videoSortable.append("<li id='lyON3M9P3eU'><img src='http://img.youtube.com/vi/lyON3M9P3eU/0.jpg' width='200' data-video='https://www.youtube.com/embed/lyON3M9P3eU'><div class='text-center' data-video-delete='lyON3M9P3eU'>Delete</div></li>"); 
 
    $videoModal.modal('hide'); 
 
    $('.ck-message').hide(); 
 
}); 
 
$('[data-video-delete]').click(function(e) { 
 
    $('#' + $(this).data('video-delete')).remove(); 
 
});

.video-clickzone { 
 
    min-height: 150px; 
 
    border: 2px dashed #dddddd; 
 
    background: white; 
 
    padding: 20px 20px; 
 
} 
 
.video-clickzone:hover { 
 
    cursor: pointer; 
 
} 
 
.video-clickzone .ck-message { 
 
    text-align: center; 
 
    margin: 2em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="video-clickzone"> 
 
    <div class="ck-message"> 
 
    <div> 
 
     <i class="fa fa-video-camera fa-5x"></i> 
 
    </div> 
 
    Click to add video 
 
    </div> 
 

 
    <ul id="videoSortable" class="list-unstyled list-inline"></ul> 
 

 
</div> 
 

 
<div class="modal bs-example-modal-md" id="videoModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-md"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header bg-primary"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
 
     </button> 
 
     <h4 class="modal-title">Add video</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>This is just an example, click on 'Add'</p> 
 
     <div class="form-group" id="video-form"> 
 
      <label class="control-label" for="video-src">Video URL</label> 
 
      <input type="url" id="video-src" class="form-control"> 
 
     </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" id="videoModalOK" data-actie="">Add</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您可以检查是否为click事件的目标是你想要的对象还是孩子，只是这样做：反正

$('.video-clickzone').click(function(e) { 
    if(e.target != this) return; //.video-clickzone was not clicked directly 
    $videoModal.modal('show'); 
}); 

，你也应该委托事件dinamically添加对象，因此您的代码将看起来像

$(document).on('click', '.video-clickzone', (function(e) { 
    if(e.target != this) return; //.video-clickzone was not clicked directly 
    $videoModal.modal('show'); 
});