使用display:none有效减少回流造成的影响
UI库果然对性能非常考究，我在mousedown的回调中插入一个节点，然后修改其样式，结果导致整个文档的点击事件都触发不了。顺便一点，当我们点击页面时，依次发生mousedown => mouseup => click。如果我们在mousedown或mouseup这前两个环节的回调中加入许多耗性能的操作，就会引发点击事件触发不了。不幸的是，我的selectable踩坑了。
selectable的设计是这样的，当我们点鼠标按下，我们插入一个节点，然后在mousemove回调中进行拖拽，画出一个可任意变动的矩形，然后这个矩形圈中或相交的节点就当作选中，加上一个类名进行变色。问题在于mousedown时这个矩形要加入一些样式，要不大家看不到。我打算是一个半透明的虚线框。
var selectable = $.fn.selectable = function(hash){
var data = $.mix({}, defaults, hash || {})
data.helper = $("
");
data["this"] = this;
this.data("selectable",data);
this.on("mousedown", data.selector, data, handleSelectStart);
this.on("click", data.selector, data, handleSelectClick);
this.on("mousemove", data.selector, data, handleSelectDrag);
return this;
}
function handleSelectStart(event){
var data = event.handleObj;
if(!data.selectingClass){
return
}
selectable.data = data;//公开到全局，方便让其他回调也能访问到
$(data.appendTo).append(data.helper);//创建一个临时节点，用于显示选择区域
data.helper.css({
left: event.pageX,
top: event.pageY,
width: 0,
height: 0,
position:"absolute",
borderWidth:1,
borderStyle:"dotted",
borderColor:"#ccc",
backgroundColor:"#fff",
opacity:.5
});
data.opos = [event.pageX, event.pageY];
//如果使用了事件代理，则在原基础上找到那被代理的元素
//.........略.........
}
出问题的代码为这个css方法，会引起回流，导致页面的其他点击事件不能触发或很难触发。
require("mass.selectable,ready",function($){
$('body').selectable({
selector: "#selectable"
});
$(document).click(function(){
console.log("xxxxxxxxxx")//这里触发不了
})
});
为此，我们在mousedown时只插入隐藏元素，在第一次拖拽时让它显示出来，这样就ok了。
function handleSelectStart(event){
var data = event.handleObj;
if(!data.selectingClass){
return
}
selectable.data = data;//公开到全局，方便让其他回调也能访问到
$(data.appendTo).append(data.helper);//创建一个临时节点，用于显示选择区域
data.helper.css({
display: "none",
left: event.pageX,
top: event.pageY,
width: 0,
height: 0,
position:"absolute",
borderWidth:1,
borderStyle:"dotted",
borderColor:"#ccc",
backgroundColor:"#fff",
opacity:.5
});
data.opos = [event.pageX, event.pageY];
//如果使用了事件代理，则在原基础上找到那被代理的元素
//.........略.........
}
//通过拖动进行选择
function handleSelectDrag(event){
var data = selectable.data
if( data ){
if(!data._reflow_one_time){
data.helper.css("display","block")
data._reflow_one_time = 1;
}
//............略............
}
}
虽然只是一个小小的事故，但提示我们UI库不好这么轻松搞定的，否则就是jquery ui的下场。