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

Question

这就是我正在尝试做的事情。有一个 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 本身上阻止它 - 但没有成功.

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

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