CODEWITHSUNDEEP
javascriptfabricjs
Sailo1
Sailo1

Reputation: 57

Click on object is not registred

I can't find what I did wrong because when I click on triangle object on canvas value of e.target is false. For other type of objects (lines,circles...) "objectname" gets its value.

canvas.on('mouse:down', function(e) {
    if (e.target) {
        objectname = e.target.name;
    }
});

What must I check or can You pleas instruct me how to proceed debug this mistake?

I had a suspect that "selectable=false;" or "deactivateAll();" might be the cause of this trouble and I did text search, but nothing did come out.

Next is a photo of objects. I can click on any object except triangle and i will get name of objects. objects on canvas

I don't need new code which will get me name of objects on canvas. My code snippet is working for all objects except triangle. It is that i have made some confusion with code for triangle objects. And now mouse:down is not registered when i click on triangle. And i can't debug this. That's the problem.

I will ask in other way, what must i do to prevent on mouse:down event to trigger when clicking on particular object to fire?

Because it is obvious that i did that with triangles because now i have this problem.

Next is an better example. 

 canvas.on('mouse:down', function(e) {
         if (e.target) {
               console.log('e.target is: '+e.target.type);
         }else {console.log('e.target is null ';}
    }

By clicking on any object except triangle I get e.target.type. And i did check all objects for objects[i].selectable and i did get true in all cases (even for triangles).

Upvotes: 0

Views: 56

Answers (2)

Lapys
Lapys

Reputation: 946

Here's your answer in plain vanilla JavaScript:

// Initialize a compatibility test
var compatibilityTest = EventTarget.prototype.addEventListener;

// Update the test
compatibilityTest = (
    typeof compatibilityTest == 'function' &&
    compatibilityTest.toString().indexOf('[native function]') > -1
);

// Compatible function for legacy and modern browsers
function setEvent() {
    var args = [... arguments].slice(1),
        element = arguments[0];

    EventTarget.prototype[
        compatibilityTest ? 'addEventListener' : 'attachEvent'
    ].apply(
        element,
        ((compatibilityTest ? '' : 'on') + String(args[0])].concat(args.slice(1))
    )
}

// Set the event
setEvent(canvas, 'click', function listener(event) { /* Do something... */ })

Upvotes: 0

Calvin Nunes
Calvin Nunes

Reputation: 6501

Assuming that you are using jQuery because of the .on() function, you can get the name of the canvas this way, binding the click with .on('click', function(){...}

var canvas = $('#myCanvas');
canvas.on('click', function(e) {      
   if (e.target) {    
          objectname = $(e.target).attr('name');
          console.log(objectname);
   }
});
canvas{
  border: 1px solid black;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" name="This is my canvas"></canvas>

Upvotes: 1

Related Questions