jQuery отключить родительский триггер при нажатии на дочерний элемент

Question

На веб-сайте у меня есть div, который является зоной щелчка. При нажатии в этой зоне модальный должен открыться, и в модальном коде должен быть введен URL-адрес видео. Нажав «ОК», видео добавляется в список, который также находится внутри зоны кликов.

Теперь, когда вы нажимаете где-то на «белом» пространстве, модальный должен открыться снова. Но нажатие на изображение (или удаление ссылки) не должно открывать модальный. К сожалению, событие click на главном 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 на события и привязать все клики к изображениям. В основном вы прикрепляете все клики к литовым селекторам внутри контейнера видеоизображения, и в этом случае вы запускаете event.stopPropagation, чтобы предотвратить событие пузыря, поэтому клик не достигает div. Обратите внимание, что это вызовет одно и то же событие, если вы щелкнете по изображению или по ссылке, поэтому вы, вероятно, захотите создать в селе различные селектора (один для изображения и один для ссылки удаления), чтобы вы могли легче справиться с удалением мероприятие.

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

Вы можете проверить, если цель для события щелчка Ваш желаемый объект или дети, просто делая это:

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

Во всяком случае, вы должны также передать событие для динамически добавленные объекты, поэтому ваш код будет выглядеть так:

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