Ruby on Rails中jquery_ujs组件拖慢速度的问题解决（jq拖拽div替换位置）万万没想到

随心笔谈2年前发布编辑

129 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

jquery_ujs 对 rails 来说，是一个非常重要的组件，它包含在 rails 的默认组件之中。

jquery ujs 包含一些非常便捷的功能，比如确认对话框、触发 ajax、自动禁用表单提交按钮等，本文主要讨论的是触发 ajax 的功能。

通过添加简单的标签属性，jquery ujs 可以把一个普通的链接或者表单转换成 ajax 提交，而不需要写 JavaScript 代码。

<%=link_to ‘关闭项目’, close_project_path(project), remote: true, method: :post %>

上面的代码会生成如下的代码

当用户点击后，它会触发一个指向地址 /projects/1/close，method 为 post 的 ajax 请求，而不是 get 的普通请求，这样使得实现 ajax 调用变得非常便捷。

网速慢导致的问题

事情并不都是美好的，在网速比较慢的时候，jquery ujs 的这个实现会出问题，如果文档还没有加载完成，用户就点击了链接，页面会发起一个到链接地址的 GET 请求，页面会跳转，但指向该地址的 GET 请求可以并不存在，这样就会出错。

有用户有提过一个相关的 Issue，但是开发者并没有受理，然而网速慢是中国的国情，问题我们还是得处理，借助于 CSS3 的一些特性，这个问题其实也不难解决。

pointer-events
pointer-events: none;

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

这个属性可以禁止元素的点击事件，因为一般 CSS 是先加载的，我们只要控制在页面加载完成之前给 jquery ujs 相关的元素应用 pointer-events: none; 样式，在页面加载完成后再去除该样式，就可以解决网速慢的情况下，页面没有加载完成时用户点击 rmote 链接导致的错误了。

解决方案

添加如下的全局样式，默认情况下含有 data-remote 和 data-method 属性的标签不可点击，除非 body 元素含有名为 ready 的 css class。

[data-remote], [data-method] {
pointer-events: none;

button, input[type=submit] {
pointer-events: none;
}
}

body.ready {
[data-remote], [data-method] {
pointer-events: auto;

button, input[type=submit] {
pointer-events: auto;
}
}
}

然后通过段简单的脚本让页面加载后给 body 元素添加 ready class

$(document).ready ->
$(‘body’).addClass(‘ready’)

于是，问题轻松的就解决了。