CODEWITHSUNDEEP
angular
J.dd
J.dd

Reputation: 157

event.target not recognized angular2

I have a function

transferDataSuccess(event, cat,label ,e ){
    var target = e.target || e.srcElement || e.currentTarget;
    this.handler.emit( {e:event, cat:cat , labelCS:event.dragData.labelCS} );    
    this.unhighlightElement( event , e );
   
}

it is binded to element via

(onDropSuccess)="transferDataSuccess($event, node.id , node.label , $event)"

however it always results in error

TypeError: Cannot read property 'nodeName' of undefined

It cannot access event.target, does Angular2 have event.target or similar method? If no what is wrong with my piece of code? Why can't it find event.target?

// unhighlight function

  unhighlightElement( e , x ){
    e=e||window.event;
    var el =   x || e.target;
    //alert(el.nodeName)
    while( el.nodeName != 'DIV'){
        el = el.parentNode;
    }

    el.style.border="";

    e.stopPropagation();
    e.preventDefault();     
  }

Upvotes: 0

Views: 540

Answers (1)

yurzui
yurzui

Reputation: 214077

I guess it should be:

(onDropSuccess)="transferDataSuccess($event, node.id, node.label)"

and your function will look like:

transferDataSuccess(event, cat, label){
  this.handler.emit({ e:event, cat:cat, labelCS: event.dragData.labelCS });    
  this.unhighlightElement(event.mouseEvent);
}

unhighlightElement(e){
  var el = e.target;
  //alert(el.nodeName)
  while( el.nodeName != 'DIV'){
    el = el.parentNode;
  }

  el.style.border="";

  e.stopPropagation();
  e.preventDefault();     
}

See this line: https://github.com/akserg/ng2-dnd/blob/09296dc1c0a5d7b04ae742d60f49c57398b4e375/src/dnd.droppable.ts#L82

Plunker Example

Upvotes: 1

Related Questions