The directions manager doesn't expose any way to add a click event to route polylines, so if you followed this sample https://samples.bingmapsportal.com/?sample=display-multiple-routes you would not be able to add any click events.
What you can do is instead call the Route REST service directly, parse the response and create polylines entities for each route path, then you can add click events to either the individual polylines or to a layer the contains all your route polylines and add some metadata/properties to your polylines so you can identify which line represents which route when clicked. Here is a modified version of that above sample that uses the REST services and adds click events to each route path:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Multiple Routes - Bing Maps Samples</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=<Your_Bing_Maps_Key>'></script>
<script>
var map, infobox, sessionKey;
var routeUrl = 'https://dev.virtualearth.net/REST/V1/Routes/Driving?o=json&wp.0={start}&wp.1={end}&key={BingMapsKey}&routeAttributes=routePath';
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
center: new Microsoft.Maps.Location(47.7, -122.14),
zoom: 10
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox( map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Get a session key from the map and use with the REST services to make requests non-billable transactions.
map.getCredentials((c) => {
sessionKey = c;
//Generate some routes.
getRoute('Seattle, WA', 'Bellevue, WA', 'red', 1);
getRoute('Kirkland, WA', 'Bothell , WA', 'blue', 2);
getRoute('Woodinville, WA', 'Duval, WA', 'green', 3);
getRoute('Redmond, WA', 'Sammamish, WA', 'orange', 4);
});
}
function getRoute(start, end, color, id) {
var requestUrl = routeUrl.replace('{start}', encodeURIComponent(start)).replace('{end}', encodeURIComponent(end)).replace('{BingMapsKey}', sessionKey);
fetch(requestUrl). then(r => r.json()).then(r => {
if (r &&
r.resourceSets &&
r.resourceSets.length > 0 &&
r.resourceSets[0].resources &&
r.resourceSets[0].resources.length > 0) {
var route = r.resourceSets[0].resources[0];
var coords = [];
route.routePath.line.coordinates.forEach(c => {
coords.push(new Microsoft.Maps.Location(c[0], c[1]));
});
var routePath = new Microsoft.Maps.Polyline(coords, {
strokeColor: color,
strokeThickness: 5
});
//Capture
routePath.metadata = {
id: id,
start: start,
end: end
};
map.entities.push(routePath);
Microsoft.Maps.Events.addHandler(routePath, 'click', routeClicked);
}
});
}
function routeClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
var m = e.target.metadata;
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
//Use the location of where the mouse was clicked to position the infobox.
location: e.location,
title: 'Route clicked',
description: `ID: ${m.id}<br/>Start: ${m.start}<br/>End: ${m.end}`,
visible: true
});
}
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
</body>
</html>