音量控制條demo，拖拽定位，點擊定位

總體效果，能夠輸出音量大小的開關

三個事件，一個拖動週期

1.鼠標按下（mousedown,touchstart），標記開始，而後記錄起始位置xy
2.鼠標移動（mousemove,touchmove），若是標記是開始狀態，則根據移動狀態位置，更新按鈕新的定位
3.鬆開鼠標（mouseup,touchend），標記結束。

注意點：

is_mousedown = 0; 變量開關

1.標記開始與結束做態就像是作了一個開關，打開的時候，此時的移動纔是有效數據，開關關閉此時的移動是無效的，這樣就不會看到鼠標鬆開後按鈕還會跟着鼠標移動的狀況
2.關於事件綁定，鼠標按下是委託到按鈕上面，剩餘兩個則是委託到document上面，這樣，當鼠標移動的時候，不在按鈕父元素上面的時候，按鈕依然能夠左右隨着鼠標移動。
以下圖所示：

更好的處理方式

html佈局

<div class="bar" id="bar">
    <span class="btn" id="btn"></span>
</div>

能夠避免事件重複被綁定

1. 鼠標按下的時候：委託鼠標移動和鬆開事件到document上面

//按下事件的回調
function down(e) {
    start_x = e.clientX;
    btn_start_left = btn.offsetLeft;
    /*按下時候委託，move 和 up 爲各自的回調方法*/
    addListener(document,'mousemove',move); //注意是委託到document上面
    addListener(document,'mouseup',up);
}
addListener(btn,'mousedown',down);//按下事件綁定到btn上面

2. 鼠標鬆開的時候：將委託到document上的兩個事件進行移除

function up(e) {
    /*鬆開解綁，move 和 up 事件*/
    removeListener(document,'mousemove',move);//解除document上面的委託
    removeListener(document,'mouseup',up); 
}

附加效果，優化

增長點擊效果，綁定到bar上面

function click_move(e) {
    var target = e.target || e.srcElement.target,
        layer_x = e.layerX || e.offsetX ;
    if(target === bar){/*排除掉點擊了btn的狀況，只在點擊了bar的狀況下有效*/
        layer_x = e.layerX;
        btn.style.left = (layer_x - btn_w/2) +'px';
    }
}

以下圖：

附加的添加事件方法，解綁相反

function addListener(btn,event,handler){
    if (btn.addEventListener){//DOM 2  三個參數，分別爲："事件名稱", "事件回調", "捕獲/冒泡"。true表明捕獲事件，false表明冒泡事件
        btn.addEventListener(event, handler,false);
    }else if(btn.attachEvent){//DOM 2  IE8及其如下版本瀏覽器
        btn.attachEvent(event, handler);
    }else{//DOM 0
        btn['on'+event] = handler;
    }
}