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

87 阅读 0 评论 58 点赞

我是靠谱客的博主有魅力大神，最近开发中收集的这篇文章主要介绍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)});
     });
 }