When I click 'Cancel' from First page - it's ok. But 'Cancel' doesn't work when I move to 'Second page'. In this case router redirects application to "" route. I need to prevent this redirection.

"Cancel" - hide links, "Second page" - move to Second page

<script type="text/html" id="template">
    <a href="#" class="cancel">Cancel</a>
    <a href="#second">Second page</a>
</script>

<div id="container"></div>    

<script>
var View = Backbone.View.extend({

    template: $('#template').html(),

    events: {
        "click .cancel": "cancel"
    },

    cancel: function () {
        this.$el.hide();
    },

    render: function () {
        this.$el.html(this.template);
        return this;
    }
});

var AppRouter = Backbone.Router.extend({

    routes: {
        "": "first",
        "second": "second"
    },

Create view and replace container's html

    links: function () {
        var view = new View;
        $('#container').html(view.render().el);
    },

    second: function () {
        this.links();
        $('#container').prepend("<h1>Second page</h1>");
    },

    first: function () {
        this.links();
        $('#container').prepend("<h1>First page</h1>");
    }

});

$(document).ready(function () {
    app = new AppRouter;
    Backbone.history.start();
});
</script>

When I click 'Cancel' from First page - it's ok. But 'Cancel' doesn't work when I move to 'Second page'. In this case router redirects application to "" route. I need to prevent this redirection.

"Cancel" - hide links, "Second page" - move to Second page

<script type="text/html" id="template">
    <a href="#" class="cancel">Cancel</a>
    <a href="#second">Second page</a>
</script>

<div id="container"></div>    

<script>
var View = Backbone.View.extend({

    template: $('#template').html(),

    events: {
        "click .cancel": "cancel"
    },

    cancel: function () {
        this.$el.hide();
    },

    render: function () {
        this.$el.html(this.template);
        return this;
    }
});

var AppRouter = Backbone.Router.extend({

    routes: {
        "": "first",
        "second": "second"
    },

Create view and replace container's html

    links: function () {
        var view = new View;
        $('#container').html(view.render().el);
    },

    second: function () {
        this.links();
        $('#container').prepend("<h1>Second page</h1>");
    },

    first: function () {
        this.links();
        $('#container').prepend("<h1>First page</h1>");
    }

});

$(document).ready(function () {
    app = new AppRouter;
    Backbone.history.start();
});
</script>

• javascript
• backbone.js
• backbone-events
• backbone-routing

• just e.preventDefault() – rcarvalho Commented Jul 2, 2014 at 18:55

2 Answers 2

I think you should return false from the cancel handler to prevent navigation to #:

cancel: function (e) {
        this.$el.hide();
        return false;
    },

http://api.jquery./on/ says:

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault().

You can also solve blocking hash havigation in a reusable way like in this answer:

Prevent navigating to another view if contents are unsaved

This solution prevents Backbone router callbacks from firing, and though it can only run AFTER the hash has changed, this function sets the previous hash fragment back so it can't be noticed

Also, for this exeact problem, you can simply change from

<a href="#">...</a>

To

<a>...</a>

it will act as a normal HTML anchor tag (e.g. cursor is set to pointer) but won't navigate anywhere