如何禁用点击输入？答案

【问题标题】：How to disable click on input?如何禁用点击输入？
【发布时间】：2016-11-14 18:29:43
【问题描述】：

我正在为 iPad 开发一个应用程序。（它是一个内部应用程序，所以它真的只适用于 iPad 而不是其他设备。）

在应用程序的第 1 页上，我有一个指向第 2 页的链接。但是，由于我需要保持独立模式，因此我阻止了链接上的默认单击行为，而是更改了 location 对象。第 2 页恰好在与我刚刚单击的链接完全相同的坐标处有一个文本输入。即使我禁用了链接上的点击行为，点击事件现在也会在链接所在的输入上触发。（这是因为touchend 的触发与click 的触发之间存在延迟。）

我在点击输入时尝试了event.preventDefault() 和event.stopPropagation()，但点击事件仍在触发并打开 iPad 的键盘。

任何想法如何阻止这种情况？谢谢。

编辑：将输入设置为readonly 或disabled 不是一个选项，因为当用户有意将其聚焦时输入需要工作（我将使用touchend事件来完成此任务）。

问题是用户在首页点击链接，触发touchend 和click 事件。 touchend 更改 location.pathname，并在第二页加载后触发 click 事件。因为第二页在触发click 事件的相同坐标处有一个文本字段，所以event.target 变成了input，到目前为止，所有禁用此事件的尝试都失败了。

【问题讨论】：

您可以在单击侦听器中设置一个 touchend 事件侦听器，以防止默认设置并自行删除。这样只会取消第一次点击。
谢谢 - 这不是解决方案，但为我指明了正确的方向。我将event.stopPropagation 和event.preventDefault 添加到在touchend 上更改location.pathname 的方法中，并阻止触发对表单的点击。

标签： javascript ios dom-events

【解决方案1】：

您是否尝试将输入设置为只读？

【讨论】：

我不希望它是只读的。这是一个合法的输入。我希望输入获得焦点并在用户主动点击它时显示键盘（为此我稍后将使用触摸事件）。但是，我不希望输入获得焦点，因为输入与触摸链接以更改视图时手指的坐标相同。
@DerekHenderson 将这些详细信息移至问题中。它可以帮助人们更好地了解您的目标。
它是唯一的输入？因为如果情况如此，就会立即获得焦点并出现键盘。（更好的手机/平板用户体验）
@JonathanMuszkat，表单中有3个输入，但显然只有一个与上一页的锚点位于同一坐标。我已经检查了该事件，并且该特定输入上的单击事件肯定已被触发。

【解决方案2】：

当您从第 1 页过渡到第 2 页时，用微调器覆盖窗口。250-300 毫秒的延迟应该足以让用户将他们的爪子从屏幕上移开。

【讨论】：

如果我要取消此选项，我宁愿将输入设置为readonly，然后设置超时以在大约 200 毫秒后删除readonly 属性。但是，这并不能回答如何防止/取消/禁用点击事件的问题。