Is it possible to suppress Durandal navigation?

Question

My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.

<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
    ...
</div>
<div class="col-xs-2">
    ...
</div>
<div class="col-xs-6">
    ...
</div>
<div class="col-xs-1">
    ...
</div>
<div class="col-xs-1">
    <button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
        <i class="fa fa-trash"></i>
    </button>
</div>
</div>

Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.

Is there any way to suppress the navigation here?

Answer 1

I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line

sessionStorage.setItem("cancelNavigation", true);

The part of the application that actually implements the navigation:

$(document.body).on('durandal-navigation', function (event) { ... }

...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!