防止在输入集中时单击锚链接？答案

【问题标题】：Prevent clicking an anchor link while an input is focused?防止在输入集中时单击锚链接？
【发布时间】：2016-03-15 18:18:34
【问题描述】：

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

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');
      });
    });
  }

两者都不能阻止页面转到被点击的任何链接...

【问题讨论】：

blur 将在点击开始注册之前完成
"有时输入和键盘周围唯一可用的空间是一个链接，而有些用户不小心点击了该链接" 看起来您正在尝试用代码解决设计问题。请考虑更改设计。
在这种情况下无法重新设计。这在非常小的屏幕上是个问题，因为键盘占用了太多空间，而且输入固定在顶部，而且必须如此。寻找一个实际的解决方案。
用媒体查询css修复它
您的问题是循环的。您如何区分链接的有效点击（模糊输入并触发点击链接）和意外点击链接？

标签： javascript jquery

【解决方案1】：

我认为你做不到。您可以在input 聚焦时禁用链接上的click 事件，并在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>

【讨论】：

哦，这也有效！这正是我想要的。

【解决方案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; }

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

【讨论】：