SVG动态生成的子元素，同时绑定"click"和"dblclick".

1、首先 在鼠标点击 svg 时，调用画矩形方法 drawRect(x,y,w,h)

var svgDom = document.getElementById('svg'); /* 取到svg元素 */var x,y;$(svgDom).on('click',function (event) {        // 绘制开始        // 获取起点坐标值        x = event.offsetX;        y = event.offsetY;        if(event.target.nodeName=='svg'){            drawRect(x,y,150,50);        }    });

function drawRect(x,y,w,h) { // 动态画矩形 の 方法        var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');        rect.setAttribute("x",x-w/2);  // 鼠标点击位置 作为 矩形的中心        rect.setAttribute("y",y-h/2);        rect.setAttribute("width",w);        rect.setAttribute("height",h);        rect.setAttribute("rx",'5'); // 设置所画矩形的圆角(border-radius)        rect.setAttribute("ry",'5');        rect.setAttribute("style",'fill:white;stroke:black;');        evt.init(rect); // 绑定 click 和 dblclick        svgDom.appendChild(rect);    }

2、绑定点击事件 判断是 单击 or 双击

var evt =(function() { // 绑定 click 和 dblclick の 方法    var timer = null;    return {        click:function () {            clearTimeout(timer);            timer = setTimeout(function(){                alert('click');            }, 300);        },        dblclick:function () {            clearTimeout(timer);            alert('dblclick');        },        init:function (elem) {            $(function () {                elem.addEventListener("click", evt.click); // 这里存在问题，修改方案继续往下看                elem.addEventListener("dblclick", evt.dblclick);            });        }    }})();

---

发现代码有点问题=_=，还是不能盲目来啊：

我用 addEventListener 给元素绑定了事件，但是在 click 和 dblclick 函数中的 this 指向的是 window ,这种情况下就不能给被绑定的元素做操作了。

---

然后我附上修改后的代码，发现问题及时修改，说不定一会还会有要改的地方。。。。慢慢来，一点点进步

var evt =(function() {    var timer = null;    return {        click:function (el) {            clearTimeout(timer);            timer = setTimeout(function(){                alert('click');                console.log(el);            }, 300);        },        dblclick:function (el) {            clearTimeout(timer);            console.log(el); // 取到的就是elem，可直接进行操作了            alert('dblclick');        },        init:function (elem) {            $(function () {                elem.addEventListener("click", function(){evt.click(elem)});                elem.addEventListener("dblclick", function(){evt.dblclick(elem)});            });        }    }})();

上面的修改是在 addEventListener 中的外来函数将 elem 传过去，但是直接加 ( ) 传参，会立即执行外来函数（click和dblclick）。
用 function(){} 包起来，将 参数 elem 传到外来函数里，就不会立即执行了。

init:function (elem) {     $(function () {        elem.addEventListener("click", function(){evt.click(elem)});        elem.addEventListener("dblclick", function(){evt.dblclick(elem)});     }); }