Question

在控制台上单击from statsmodels.tsa.arima_model import ARMA import statistics data=[x + random() for x in range(1,100)] model=ARMA(data,order=(0,1)) model_fit=model.fit(disp=False) y_hat=model_fit.predict(len(data),len(data))应该只写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');
	}
});

Answer 1

要停止传播，请在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>

Answer 2

尝试这个：

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

Answer 3

试图在不使用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>

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

3 个答案: