使用JQuery，我向A Bootstrap v3.3按钮添加了一个单击处理程序。在该函数内部，我使用了javascript:

// 
featureInfo.main_rgb = $("#f_mainRGB").val(); 
featureInfo.main_rgb = (featureInfo.main_rgb == "") ? null : featureInfo.main_rgb.substring(1); 
// 
featureInfo.stripe_rgb = $("#f_stripeRGB").val(); 
featureInfo.stripe_rgb = (featureInfo.stripe_rgb == "") ? null : featureInfo.stripe_rgb.substring(1); 
// 
featureInfo.border_rgb = $("#f_borderRGB").val(); // here is where it barfs 
featureInfo.border_rgb = (featureInfo.borderRGB == "") ? null : featureInfo.border_rgb.substring(1); 

那就是从3个HTML 5颜色控件中获取值，并将它们放在JSON对象中，以供以后的AJAX调用来更新数据。前两个，mainRGB和stripeRGB都没问题，但是将val()的borderRGB cal设置为“Chrome”标签后，立即转到“Aw，Snap”。没有暂停，就像它是由于偶然的无限循环导致的内存不足错误一样。

如果我尝试使用基本的javascript而不使用JQuery并使用document.getElementById(“f_borderRGB”)进行开发，则开发工具会显示以下错误:

metadata.jsp:259 Uncaught TypeError: Cannot convert undefined or null to object 
at HTMLButtonElement.doEditSelectedFeature (metadata.jsp:259) 
at HTMLButtonElement.dispatch (jquery.min.js:3) 
at HTMLButtonElement.q.handle (jquery.min.js:3) 
doEditSelectedFeature @ metadata.jsp:259 
dispatch @ jquery.min.js:3 
q.handle @ jquery.min.js:3 

如果在获得这三个控件的值时更改顺序，则它总是发生在第三个控件上，而不管是哪个特定控件。

此外，仅当我使用开发人员工具调试该功能并使用F10越过该代码行时，才会发生这种情况。即使该行是要执行的下一行，并且我按下F8继续运行而不停止而不是F10，也不会发生错误。

当另一个AJAX调用返回服务器中的数据时，JQuery将输出表单的HTML5

var h = "<form class=\"form-horizontal\">" + 
    "<div class=\"form-group\">" + 
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_mainRGB\">Main RGB: </label></div>" + 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_mainRGB\" value=\"#"+filterEmptyString(featureInfo.main_rgb)+"\" disabled/></div>"+ 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_mainRGB\"></div>" + 
    "</div>"+ 
    // 
    "<div class=\"form-group\">" + 
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_stripeRGB\">Stripe RGB: </label></div>" + 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_stripeRGB\" value=\"#"+filterEmptyString(featureInfo.stripe_rgb)+"\" disabled/></div>"+ 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_stripeRGB\"></div>" + 
    "</div>"+ 
    // 
    "<div class=\"form-group\">" + 
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_borderRGB\">Border RGB: </label></div>" + 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_borderRGB\" value=\"#"+filterEmptyString(featureInfo.border_rgb)+"\" disabled/></div>"+ 
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_borderRGB\"></div>" + 
    "</div></form>"; 
$("#pfSelectedFeatureInfo").html(h); 

在Firefox中不会发生此问题。

任何想法是什么原因造成的？

请您参考如下方法:

这是Chrome DevTools中的错误，开发人员表示他们需要一段代码来演示它。我无法发送我的代码(NDA)，但也许可以吗？在这里看看!
https://bugs.chromium.org/p/chromium/issues/detail?id=839449#c8