如何阻止指定容器以外的所有内容的所有输入？答案

【问题标题】：How to block all input on everything beyond specified container?如何阻止指定容器以外的所有内容的所有输入？
【发布时间】：2021-05-09 16:39:49
【问题描述】：

这就是我想要做的。有一个 CMS 系统，带有相当“javascript 化”的 UI 控件。许多自定义类型的输入，大量事件，分配给每个等等。我的任务是阻止某些字段更改，而不是使它们“禁用”（这样当数据发送到服务器时它们不会被忽略）。在加载我自己的小部件之前，我无法控制应用程序和其他小部件所做的任何事情。到这个时候，已经有很多东西了（分配的事件等）

当前的实现是这样的：

    blockField: function($input)
    {
        if ($input.length===0) { return; }

        $input.prop('readonly', true);

        // Workaround for calendar widget
        if ($input.hasClass('date_field')) {
            $input
                .removeClass('date_field')
                .addClass('text-input');
        }

        var $valueCell = this.getFieldContainer($input);
        $valueCell.on('focus', '*', function(event) {
            this.error(this.w_code, 'One cannot simply change this field!');
            return false;
        }.bind(this));
    },

但是，这不适用于所有类型的小部件。还有一些其他的缺点。

因此，我们的想法是拦截所有在向下到小部件容器的途中的事件，并阻止它们更深入地传播。

我的天真尝试如下：

        $valueCell.get(0).addEventListener('click', function (e) {
            e.stopPropagation();
            this.error(this.w_code, "Just don't…");
            return false;
        }.bind(this), true);

似乎阻止了“点击”通过容器（$valueCell）；然而，类似的技巧不适用于“焦点”事件——它是一个鬼鬼祟祟的家伙。我试图用e.preventDefault() 和e.stopImmediatePropagation() 在$input 本身上阻止它——没有运气。

真的有人解决过这样的问题吗？

【问题讨论】：

检查接受的答案，我认为这是正确的做法：stackoverflow.com/questions/6700297/…
@Gatsbill 我已经设置了只读。它不会阻止元素被聚焦。事实上，它只有装饰意义（输入改变了焦点的外观），但我还是想避免它。 screensot

标签： javascript jquery jquery-events

【解决方案1】：

有一个 CSS 属性：'pointer-events'，它有助于防止字段变得“集中”。

这是最终的实现：

function blockFieldsInside($container)
{
  $input = $container.find('input,textarea,select');

  // Make all controls read-only:
  $input.prop('readonly', true);

  // On the "capture" leg of event bubbling (it's important)
  // we stop all intercepted clicks
  $container.get(0).addEventListener('click', function (e) {
    e.preventDefault(); // probably overkill (returning false anyway)
    e.stopPropagation(); // probably overkill (returning false anyway)
    alert('No.');

    return false;
  }, true);

  // This fixes drop-downs from opening via keyboard:
  $container.on('keydown keyup', '*', function () {
    return false;
  });

  // Don't "tab" onto blocked fields:
  $input.each(function () {
    $(this).prop('tabindex', -1);
  });

  // The final accord:
  $('*', $container).css({ pointerEvents: 'none' });
}

【讨论】：