javascript - 如何通过点击 child 来避免点击 parent ？

Question

<div class='titlewrap'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<br><br>
</title>

我想将右键单击 titlewrap 与 title 分开。

js

$(document).on('contextmenu', '.titlewrap', function(e) {
    e.preventDefault();
    console.log('titlewrap');
});

$(document).on('contextmenu', '.title', function(e) {
    e.preventDefault();
    console.log('title');
});

点击 title 得到双控制台结果:
标题换行
标题

如何通过点击 title 只获得 title 并保持 titlewrap 点击 titlewrap (下面的空白区域标题)

Answer 1

使用event.stopPropagation()阻止事件冒泡到父级并触发其事件。您仍然可以通过右键单击未被 title 元素覆盖的区域来触发 titlewrap 的事件

$(document).on('contextmenu', '.titlewrap', function(e) {
    e.preventDefault();
    console.log('titlewrap');
});

$(document).on('contextmenu', '.title', function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('title');
});

.titlewrap {
  padding:10px;
  border:black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='titlewrap'>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
</div>