управление щелчком внутри и снаружи элемента - PullRequest
Новая
       1

управление щелчком внутри и снаружи элемента

1 голос
/ 25 сентября 2019

Нажмите 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>

Ответы [ 3 ]

2 голосов
/ 25 сентября 2019

Для остановки распространения есть функция внутри event event.stopPropagation . 

$('.mdtop').on('click', function(event) {
    /* event.stopPropagation();
    console.log('top'); */
    
    if (!$('#mdwrap').is(':visible')) {
      event.stopPropagation();
      console.log('top');
    }
});

$('.mdtitle').on('click', function(event) {
    /* event.stopPropagation();
    console.log('title'); */
    
    
    if (!$('#mdwrap').is(':visible')) {
      event.stopPropagation();
      console.log('title');
    }
});

$('button').on('click', function(event) {
    /* event.stopPropagation();
    console.log('button'); */
    
    if (!$('#mdwrap').is(':visible')) {
      event.stopPropagation();
      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>
  <div class='mdtitle mditem' id='mdtitle'>TITLE</div>
</div>
<button>OUTSIDE</button>
1 голос
/ 25 сентября 2019

Пытался предоставить общее решение без использования event.stopPropgation

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

            $('#mdwrap').on('mouseover', function() {
                isOutSideClick = false;
            });

            $('#mdwrap').on('mouseleave', function() {
                isOutSideClick = true;
            });

        });

        $(document).on('click', function(e) {
            if ($('#mdwrap').is(':visible') && isOutSideClick)
                console.log('false');

        });
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
    <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>
</body>

</html>
1 голос
/ 25 сентября 2019

Попробуйте это: 

$('.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...