爲D3.js中的drag、zoom阻止冒泡和默認事件

業務需求是模態框爲可拖動，模態框內爲D3.js的拖拽和縮放事件，然而兩者是衝突的，出現的效果特別奇怪，但是在D3中回調函數並沒有Event事件，所以只能用D3自帶的阻止默認事件方法去處理。

• 原生阻止默認事件方法

//阻止瀏覽器的默認行爲 
function stopDefault(e) {
    //阻止默認瀏覽器動作(W3C) 
    if (e && e.preventDefault)
        e.preventDefault();
    //IE中阻止函數器默認動作的方式 
    else
        window.event.returnValue = false;
    return false;
}

function stopBubble(e) {
    //如果提供了事件對象，是非IE瀏覽器 
    if (e && e.stopPropagation)
        //使用W3C的stopPropagation()方法 
        e.stopPropagation();
    else
        //使用IE的cancelBubble = true來取消事件冒泡 
        window.event.cancelBubble = true;
}

//調用

$("div").on("clcik",function(event){
    var e = event || window.event;
    stopDefault(e);
    stopBubble(e);
})

• D3.js 阻止默認事件方法

var draged = d3.behavior.drag().on("drag", ondrag)
    .on("dragstart", function () {
      d3.event.sourceEvent.stopPropagation();
    }).on("dragend", function () {
      d3.event.sourceEvent.stopPropagation();
    });

var zoomed = d3.behavior.drag().on("zoom", ondrag)
    .on("zoomstart", function () {
      d3.event.sourceEvent.stopPropagation();
    }).on("zoomend", function () {
      d3.event.sourceEvent.stopPropagation();
    });

需要阻止的四個事件分別爲
- dragstart :拖動開始時觸發
- dragend :拖動結束時觸發
- zoomstart ：縮放開始時行爲
- zoomend ：縮放結束時行爲

參考資料：
D3 API詳解