Question

我尝试阻止用户点击链接，并在任何输入聚焦时转到另一个页面。有时输入和键盘周围唯一可用的空间是链接，有些用户意外点击链接。我试图这样做，当他们点击链接时，它会模糊输入（关闭键盘）并阻止页面跟随链接。然后让他们再次点击链接，如果他们想要在输入不再聚焦后转到另一个页面。

HTML

<input type="text">
<a href="example.com">Example</a>

我已尝试过以下内容......

的jQuery

$('a').on('click', function (event) {
   if ($('input').is(":focus")) {
      console.log('focused');
      event.preventDefault();
   }
});

（没有记录）

也尝试了这个......

if ($('input').is(":focus")) {
    $('a').on('click', function (event) {
      event.preventDefault();
      $('input').each(function(){
        $(this).trigger('blur');
      });
    });
  }

两者都没有阻止页面进入点击的任何链接...

Answer 1

我认为你不能这样做。您可以在click关注时禁用链接上的input事件，并在blur元素上发生input时再次启用该事件。但是，如果用户点击链接时，首先会关注input元素blur事件（这会启用点击），那么click甚至会发生并且链接正常运行。

您可以尝试在input元素具有焦点时禁用链接，然后您可以在第一次单击时启用它们并恢复正常操作。

$("input").on("focus", function() {
    $("a").on("click", function (event) {
      event.preventDefault();
      $("a").off();
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<a href="http://example.com/">example</a>

Answer 2

我想我找到了解决方案。

<强> HTML

Example.com

<强>的jQuery

$('input').on('focus', function () {
      $('a').each(function(){
        $(this).addClass('cant-click');
      });
});

$(document).on('touchend', function (e) {
    if (!$(e.target).closest('input').length) {
      $('a').each(function(){
        $(this).removeClass('cant-click');
      });
    }
});

<强> CSS

a.cant-click { pointer-events: none; }

当输入获得焦点时，每个链接都会获得此类。当点击页面上任何不是输入的内容时，它会从每个链接中删除此类。

在输入聚焦时防止单击锚链接？

2 个答案: