2017-08-02 4 views
1

私はaddEventListenerを持っていましたが、これはクリック回数に応じて複数回起動されます。一度だけ実行するようにするにはどうすればいいですか?私はremoveEventListenerを使ってみましたが、全く動かなかったのです。addEventListenerのEventListenerを削除するには?

ご協力いただきありがとうございます。事前に感謝:)あなたは、次のようremoveEventListenerに関数を渡す必要があり

Provider.ts

addInfoWindow(marker,ListingID){ 

this.http.get(this.baseURI + '/infoWindow.php?id=' + ListingID) 
    .map(res => res.json()) 
    .subscribe(Idata => { 

    let infoData = Idata; 

     let content = "<ion-item>" + 
    "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + 
    "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingStartTime + "</p>" + 
    "<p> Salary: $" + infoData['0'].ListingSalary + "</p>" + 
    '<p id="' + infoData['0'].ListingID + '">Apply</p>' 
    "</ion-item>";  

    console.log("CREATING INFOWINDOW WITH CONTENT"); 
let infoWindow = new google.maps.InfoWindow({ 

content: content 

}); 

    google.maps.event.addListener(infoWindow, 'domready',() => { 

    let goInfoPage = document.getElementById(infoData['0'].ListingID); 

    console.log("GETTING PAGE ID"); 

    //let it run only once, currently will increment by 1 if infoWindow if closed and reopen 
    goInfoPage.addEventListener('click',() => { 

    let pushData = infoData['0']; 

    console.log("GETTING PAGE DATA"); 

    let nav = this.app.getActiveNav(); 

    console.log("PUSHHING TO PAGE"); 

    nav.push('StoreInfoPage',{'record':pushData}); 

    }) 

goInfoPage.removeEventListener('click',() => {  
    console.log("REMOVE EVENT LISTENER"); // did not run 
    }); 

}); 


google.maps.event.addListener(marker, 'click',() => { 
console.log("MARKER CLICKED, OPENING INFOWINDOW"); 
infoWindow.open(this.map, marker); 

    }); 


}); 

} 
+0

正確に何をしたいですか? 'addEventListener'のコールバックの中で' removeEventListener'を呼び出して、 'addEventListener'で使用した関数への参照を渡してください –

答えて

1

removeEventListener以前として追加された機能を受け入れコールバックではなく、addEventListenerのリスナーです。このため、匿名関数をリスナーとして使用することは現実的ではなく、削除することはできません。

角度に固有ではありません。これは、一般的なJavaScriptの知識:

const onClick =() => { 
    ... 
    goInfoPage.removeEventListener('click', onClick); 
}); 

goInfoPage.addEventListener('click', onClick); 

角度のアプリケーションは、従来RxJSに依存している、それはすることができます。

import 'rxjs/add/observable/fromEvent'; 
import 'rxjs/add/operator/first'; 

... 
Observable.fromEvent(goInfoPage, 'click').first().subscribe(() => { 
    ... 
}); 

リスナーの除去はRxJSによって処理されます。

0

let div = document.getElementById("myDiv"); 

let coolFunction =() => { 
    console.log("Hello World"); 
    div.removeEventListener("click", coolFunction); 
} 

div.addEventListener("click", coolFunction); 
関連する問題