how to find out click event in canvas,kinetic js

Question

I am trying to find click event on shape. when i click on shape like rectangle its become drag-gable but when i click outside of it,it should off its resizable feature. i tried with blur function but doesn't work. i don't want it on mouse out. problem is when i click on rectangle it gives me alert but when i click on canvas it gives me that alert twice because that shape is part of canvas. so please suggest me how to distinguish between click on shape and out side of shape. how to find out click event in canvas,kinetic js

Are you using KineticJS events (not DOM events)? You can have KineticJS listen for clicks on a rectangle like this: myRect.on("click",function(){ console.log("clicked"); }); — markE
yes,I am using KineticJS events in same ways as u suggested. But click on myRect gives me event on rect but when i click on canvas it should loose its focus or resizable feature which is not happening. means suggest me a way like when i click on Rectangle it will alert "clicked on Rectangle" and when i will click on canvas it will alert "click on canvas". in this scenario you will get both rectangle and canvas alert on click on myRect which i don't want. in short still i am not able to differential canvas click and shape click event. Thanks in advance — Abhish Mahajan
What are you using to listen to click event on the canvas ? Please take a look at this page stackoverflow.com/questions/13902747/… — TSE
I was using box.on('click',function(){alert("box clicked")}); and canvas.addEventListener('click',function(e){alert("canvas clicked")}); and after that i tried above all solutions but same issue i am getting. when i click on rectangle that rectangle becomes resizable but when i click on canvas it should loose its resizable feature. But here on click of canvas also my box still able to resize which i don't want — Abhish Mahajan

RUSHABH SHAH RUSHABH SHAH · Accepted Answer · 2016-04-29T08:54:44

you can try something like this

 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);
        });
    },

how to find out click event in canvas,kinetic js

1 Answers