Javascript 如何阻止指定容器之外的所有输入？

这就是我要做的。有一个CMS系统具有相当多的“javascriptifyed”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);

它似乎可以防止“click”通过容器（$valueCell）；然而，类似的把戏对“焦点”活动不起作用——它是一个鬼鬼祟祟的家伙。我试图用

e.preventDefault（）

和

e.stopImmediatePropagation（）

在

$input

本身上阻止它，但运气不好

---

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

有一个CSS属性：“指针事件”，它有助于防止字段“聚焦”

以下是最终实现：

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

---

有一个CSS属性：“指针事件”，它有助于防止字段“聚焦”

以下是最终实现：

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

---

检查接受的答案，我认为这是一个正确的方法：@Gatsbill我已经设置为readOnly。它不会阻止元素被聚焦。事实上，它只是表面上的意思（输入改变了焦点的外观），但我还是想避免它。检查接受的答案，我认为这是一个正确的方法：@Gatsbill我已经设置为readOnly。它不会阻止元素被聚焦。事实上，它只是表面上的意思（输入改变了焦点的外观），但我还是想避免它。