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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/78645572

业务需求是模态框为可拖动，模态框内为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详解