Question

在输入字段模糊的情况下，我要运行验证程序。如果验证失败，则需要将重点重新放在该字段上，并取消下一个预期的操作。

我能够实现第一部分，将焦点重新设置到字段中，但是接下来的操作（单击按钮，单击链接）也正在执行。如果验证失败，我需要限制动作的帮助。

以下是复制此行为的代码段。专注于该领域，然后尝试单击链接/按钮。他们的回调正在执行，如果输入字段的blur事件处理程序发生错误，我需要限制它们。

$(document).ready(function() {
  $('.form-control').blur(function(e) {
    var $this = jQuery(this),
      hasError = true;

    if (hasError) {
      setTimeout(function() {
        $this.focus();
      }, 0);
      return false;
    }
  });

  $('.link').click(function(e) {
    console.log('link clicked');
  });

  $('.button').click(function(e) {
    console.log('button clicked');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input type="text" class="form-control" />
  <br/><br/>
  <a href="javascript:void(0);" class="link">Link</a>
  <br/><br/>
  <button class="button">Submit</button>
</div>

Answer 1

您可以尝试使用const myChart = new Chart(this.ctx, { type: 'doughnut', options: { cutoutPercentage: 85, rotation: 2.72, circumference: 4, aspectRatio: 2.8, legend: { display: false }, events: ['mousemove', 'mouseout', 'touchstart', 'touchmove'], data: { labels: ['clients.', 'no clients.'], datasets: [{ data: [this.segurosClients, this.prosperaClients], backgroundColor: [gradient, '#E3E7F3'], borderWidth: 1 }], }, });

pointer-events

$(document).ready(function() {
   $('.form-control').blur(function(e) {
     var $this = jQuery(this), 
     hasError = $this.val().trim()== ''?true:false;
     
     if(hasError) {
       setTimeout(function() {
         $this.focus();
       }, 0);
       $('.link, .button').css('pointer-events','none');
     }
     else $('.link, .button').css('pointer-events','');
   });
  
  $('.link').click(function(e) {
     console.log('link clicked');
   });
  
  $('.button').click(function(e) {
       console.log('button clicked');
   });
});

如果模糊事件验证失败，请采取措施

1 个答案: