如何在画布，动力学js中找出点击事件答案

【问题标题】：how to find out click event in canvas,kinetic js如何在画布，动力学js中找出点击事件
【发布时间】：2016-04-29 16:54:44
【问题描述】：

我正在尝试查找形状上的点击事件。当我单击矩形之类的形状时，它变成了可拖动的山墙，但是当我单击它外部时，它应该关闭其可调整大小的功能。我尝试了模糊功能，但不起作用。我不希望它在鼠标外。问题是，当我单击矩形时，它会给我警报，但是当我单击画布时，它会给我两次警报，因为该形状是画布的一部分。所以请建议我如何区分点击形状和外部形状。如何在画布，动力学js中找出点击事件

【问题讨论】：

你在使用 KineticJS 事件（不是 DOM 事件）吗？您可以让 KineticJS 像这样监听矩形上的点击： myRect.on("click",function(){ console.log("clicked"); });
是的，我使用 KineticJS 事件的方式与您建议的方式相同。但是单击 myRect 会给我 rect 事件，但是当我单击画布时，它应该会失去焦点或可调整大小的功能，而这并没有发生。意味着建议我一种方式，比如当我点击矩形时，它会提醒“点击矩形”，当我点击画布时，它会提醒“点击画布”。在这种情况下，您将在单击我不想要的 myRect 时同时获得矩形和画布警报。简而言之，我仍然无法区分画布点击和形状点击事件。提前致谢
你用什么来监听画布上的点击事件？请看这个页面stackoverflow.com/questions/13902747/…
我使用的是 box.on('click',function(){alert("box clicked")});和 canvas.addEventListener('click',function(e){alert("canvas clicked")});之后我尝试了所有解决方案，但我遇到了同样的问题。当我单击矩形时，该矩形变得可调整大小，但是当我单击画布时，它应该失去其可调整大小的功能。但是在这里点击画布我的盒子仍然可以调整我不想要的大小

标签： javascript html kineticjs

【解决方案1】：

你可以试试这样的

 appendEvents: function(box, area){
        _self = this;

        // add cursor styling
        box.on('mouseover', function() {
            _self.draw = false;
            document.body.style.cursor = 'pointer';
        });
        box.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });
        box.on('click', function() {
            _self.draw = true;
            _self.focusArea(area, box,box.attrs.x,box.attrs.y);
            _self.openFocusArea(area,box,box.attrs.x,box.attrs.y);
        });
        box.on('dragend', function() {
            _self.draw = false;
            _self.dragArea(area, box);
        });
    },

【讨论】：

先用this.stage = new Kinetic.Stage({})创建一个舞台，然后用var layer = new Kinetic.Layer();创建层和盒子，用下面的代码layer.add(box); this.stage.add(layer);添加它们，然后在下面直接定义这样的事件，并在这个函数中编写你的onclick代码或制作像我提到的额外功能