一切都来自本地主机时的跨域对象

Question

每次用户更改我网页上的文本输入时，我都会尝试记录。我正在使用以下内容：

function formInit(socketObject) {
  $('input:text').change( (eventObject) => {
    console.log(document.domain);
    console.log(JSON.stringify($(this)));
    //... send stuff via socketObject
  });
}

我从$(document).ready() 打来的电话。我在第四行收到以下错误，即记录 $(this):

SecurityError: Permission denied to access property "toJSON" on cross-origin object

尽管console.log(document.domain); 从脚本和调用它的主文档返回localhost。唯一没有从本地主机上的烧瓶服务器提供的是几个库（jquery、socketio、cleave）和散景图中的一些组件，我很确定它们不符合@987654325 @，当然不是我在调试中一直在 .change()ing 的东西。

谁能建议我在这里哪里出错了，或者我应该去哪里看？谢谢。

Answer 1

错误是因为this 不是您所期望的input:text 元素，因为您使用的是箭头函数，因此没有维护词法范围。您要么需要将箭头函数更改为匿名函数：

function formInit(socketObject) {
  $('input:text').change(function() {
    // 'this' now refers to the element which raised the event
  });
}

或者保留箭头函数，但从引发并作为参数提供给处理函数的事件中获取对元素的引用：

function formInit(socketObject) {
  $('input:text').change(e => {
    // 'e.target' now refers to the element which raised the event
  });
}

除了错误之外，字符串化整个 jQuery 对象有点奇怪。最好只提取您需要的相关属性，如下所示：

function formInit(socketObject) {
  $('input:text').change((e) => {
    console.log(document.domain);
    console.log({
      id: e.target.id,
      value: e.target.value
      // other properies here...
    });

    // send stuff via socketObject...
  });
}