使用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的下场。