Javascript：未捕获的 InvalidStateError：无法读取“selectionDirection”

Posted 2023-02-24

【中文标题】Javascript：未捕获的 InvalidStateError：无法读取“selectionDirection”

【英文标题】：Javascript : Uncaught InvalidStateError: Failed to read the 'selectionDirection'

【发布时间】：2015-02-23 21:27:43

【问题描述】：

我收到此错误消息：

未捕获的 InvalidStateError：无法从“htmlInputElement”读取“selectionDirection”属性：输入元素的类型（“隐藏”）不支持选择。

当我检查控制台时，它在此代码中显示错误：

function simpan() 
    $.ajax(
        url: 'app/tblhasilsurvey/simpan',
        type: 'post',
        async: false,
        data: 
            cmd: window.cmd,
            id: window.id_hasilsurvey,
            id_daftar: window.id_daftar,
            id_jadwal: window.id_jadwal,
            //tblhasilsurvey_nobasurvey : $("#nomor_ba_survey").val(),
            nomor_izin : $("#nomor_izin").val(),
            tgl_izin : $("#tgl_izin").val(),
            pemilik_izin : $("#pemilik_izin").val(),
            lokasi : $("#lokasi").val(),
            kodekel : $("#kelurahan").val(),
            kodekec : $("#kecamatan").val(),
            tblhasilsurvey_tglbasurvey : $("#tgl_ba_survey").val(),
            tbldaftarrencanasurvey_koordinat : $("#lattitude_").val()+';'+$("#longitude_").val(), // (lattitude;longitude)
            tblhasilsurvey_fungsibangunan : $("#fungsi_bangunan").val(),
            tblhasilsurvey_uraianpermasalahan : $("#uraian_permasalahan").val(),
            tblizin_id : $("#tblizin_id").val()
        ,
        success: function (data) 
            if(data=='success') 
                notifikasi('Sukses','Data Berhasil Disimpan', 'success');
                //window.location.reload();
             else 
                notifikasi('Gagal','Data Gagal Disimpan', 'fail');
            
        
    );
    if( $("#lattitude_").val() !='' ) window.pos_lat = $("#lattitude_").val(); // jika koordinat terisi maka update posisi lattitude
    if( $("#longitude_").val() !='' ) window.pos_long = $("#longitude_").val(); // jika koordinat terisi maka update posisi longitude

    $("#peta-lokasi").slideDown(1000);
    initialize();
    $("html, body").animate( scrollTop: $(document).height() , 2500);
    return false;

    function refresh () 
        window.location.reload();
    

谁能解释一下这里发生了什么？

【问题讨论】：

具体哪一行有错误？有堆栈跟踪吗？该错误似乎不言自明；某些东西（可能不在此代码中，但在它调用的东西中，例如 notifikasi 或 initialize）可能正在尝试读取隐藏元素上的 selectionDirection。

【参考方案1】：

在您的 HTML 中某处，您有一个 <input type='hidden' />，您正尝试将其添加到您的数据 obj 中，但您可能正在添加 jQuery 对象，并且当 jQuery 对象在某处被字符串化时，可能会抛出此消息。鉴于您的大部分数据对象是通过显式调用.val() 构建的，我猜问题出在其中之一：

        cmd: window.cmd,
        id: window.id_hasilsurvey,
        id_daftar: window.id_daftar,
        id_jadwal: window.id_jadwal,

尝试将这些注释掉，看看您的错误是否消失。如果是这样，那么问题可能可以通过在有问题的行末尾添加.val() 来解决。

---

编辑和扩展

（2015 年 4 月 9 日）自从我写下这个答案以来，已经有 3 个赞，而且都及时展开，所以我猜其他人遇到了这个错误并找到了这个答案，所以这里有一个更一般的解释来帮助人们出去。

如果将表示隐藏输入的 jQuery 对象添加到 JS 对象，然后尝试将该 JS 对象序列化为 JSON，则会引发此错误。

以最简单的形式重现错误的演示：

http://jsfiddle.net/ptugva6t/2/

使用此 HTML：

<input type="hidden" id="test1" value="test1_val" />

那么#test1如果我们使用这个JS就会触发错误：

$(document).ready(function() 
    var data = 
        test1: $("#test1")
    
    JSON.stringify(data)
);

不过这样就可以了：

$(document).ready(function() 
    var data = 
        test1: $("#test1").val()
    
    JSON.stringify(data)
);

如果您使用文本输入，您不会遇到此错误，但由于您尝试序列化的对象的复杂性，您可能会遇到其他序列化错误！

---

更新

（2016 年 9 月 7 日）看起来这只是一个 Chrome 错误，并且已在最近的 Chrome 更新中得到修复。 Chrome 52 现在完全没有错误，您可以毫无问题地 JSON.stringify 一个 jquery 对象。

火狐也可以。不过，Safari 9.1.1 仍然会引发错误 - JSON.stringify 上的 TypeError 可以通过添加 .val()

来修复

于是出现了一个小项目，用于查找 Chrome 错误报告及其修复，并将其报告给 Safari。

【讨论】：

这是一个对用户非常不友好的错误信息！这确实有助于澄清我的问题。

显然有些事情发生了变化，因为当我尝试提供的小提琴时，无论我是否将 .val() 附加到 jQuery 调用，它都不会触发错误。

这真的很有趣，感谢您提及。我创建了一个小提琴，它将序列化 jquery 对象的结果打印到控制台。你是对的，它确实工作正常并且产生了相当理智的输出：jsfiddle.net/ptugva6t/16我会看看我是否能弄清楚发生了什么变化。

我尝试了一些旧版本的 jquery，看看是否可以重现问题；即，是 jquery 对象本身的故障吗？但是不，它仍然可以正常工作。所以我认为这必须在最新版本的 Chrome 中得到修复，并改进了 JSON.stringify。如果您在 Safari 中运行小提琴，您仍然会遇到“TypeError”问题，可以使用 .val() 修复...我会更新答案。