使用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 = $("<div class="ui-selectable-helper"></div>");
       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;
           }
       //............略............
       }
   }