javascript - 管理元素内部和外部的点击

单击mdtop应该在控制台中只写top。
单击mdtitle应该只写title
如果button不可见，则单击button应该只写mdwrap（默认）。
如果mdwrap是可见的-单击mdwrap以外的任何位置（包括按钮和许多其他元素）-应输入false。

这是我的尝试，没有成功：

$('.mdtop').on('click', function(){
  console.log('top');
});
$('.mdtitle').on('click', function(){
  console.log('title');
});
$('button').on('click', function(){
  console.log('button');
});
$(document).on('click', function(e){
	if($('#mdwrap').is(':visible') && !$(e.target).is('#mdwrap')){
		console.log('false');
	}
});

.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='mdwrap esc' id='mdwrap'>
<div class='mdtop' id='mdtop'>TOP</div>
<br>
<div class='mdtitle mditem' id='mdtitle'>TITLE</div>
</div>
<br>
<button>OUTSIDE</button>

最佳答案

试试这个：

$('.mdtop').on('click', function(e){
  e.stopPropagation();
  console.log('top');
});
$('.mdtitle').on('click', function(e){
  e.stopPropagation();
  console.log('title');
});
$('button').on('click', function(e){
  if(!$('#mdwrap').is(':visible')){
  		e.stopPropagation();
		console.log('button');
  }
});
$(document).on('click', function(e){
	if($('#mdwrap').is(':visible')){
		console.log('false');
	}
});

<div class='mdwrap esc' id='mdwrap'>
<div class='mdtop' id='mdtop'>TOP</div>
<br>
<div class='mdtitle mditem' id='mdtitle'>TITLE</div>
</div>
<br>
<button>OUTSIDE</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>