Question

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

现在点击＆＃34; white＆＃34;空间，模态应该再次打开。但是点击图像（或删除链接），不应该打开模态。不幸的是，主div上的click事件总是被触发。

我已尝试用event.stopPropagation()解决此问题，但在我使用它的方式中，我无法完成这项工作。我怎样才能实现这一目标。

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

＆＃13;

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();
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

您可以检查点击事件的目标是否是您想要的对象或子项，只需执行以下操作：

$('.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');
});

单击子节点时jQuery禁用父触发器

2 个答案: