javascript - 单击事件未在子 div 中捕获

Question

我正在尝试使用基本的 HTML、CSS 和 JQuery 制作列表组件。我希望在单击事件时选择列表项。当我单击列表项文本周围的空间(padding space)时，将捕获单击事件。但是当我点击文本(也是整个 file-name div 占用的空间)时，没有捕获点击事件。可能是因为里面的child div？任何帮助，将不胜感激。谢谢。

function selectFile(id, key) {
  if($(id).hasClass('selected')) {
    $(id).removeClass('selected');
  } else {
    $(id).addClass('selected');
  }
}

$('.file-list-section').on('click', function(event) {
  selectFile('#'+event.target.id, event.target.dataset.key);
})

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>

Answer 1

您的代码专注于整个列表的类，而不是单独处理每个列表项。我已经简化了你的 jQuery 说如果我点击“这个”.file-row 切换选择的类。这允许多个突出显示。如果您一次只想要一个，请在每次点击时清除所有“选定”类。

$('.file-row').removeClass('selected');

$('.file-row').click(function(){
$(this).toggleClass('selected');
})

.file-row {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}
.file-list-section .file-row.selected {
    background: #26a69a;
    color: white;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="fileList" class="file-list-section">
  <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg">
    <div class="file-name">cd58ef701e28f6df8.jpg</div>
  </div>
  <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg">
    <div class="file-name">a682e06e25c5c86.jpg</div>
  </div>
  <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg="">
    <div class="file-name">Jefree copy.jpeg</div>
  </div>
</div>