Phone.js toolbar click action

Question

There is the problem I want to add button 'back' to the dxToolbar (PhoneJS). By clicking to this button I should back to the previous page. But By clicking on a name of Toolbar "some div block" will be appear. Here is the deal: when i am clicking on 'back'-button before navigate to the previous page the "some div block" appears. What should i do to stop propagation of the event? I try to do it with jQuery, but it doesn't help

html-file

        <div class="toolbarsContainer" data-options="dxContent: { targetPlaceholder: 'toolbar' }">

            <div data-bind="dxToolbar: { dataSource: toolbarKeyItems, clickAction: showScroll }">
            </div>

            <div id="scrollView" data-bind="dxScrollView: { direction: 'horizontal' }">
                <div style="margin: 10px;">
                    <div data-bind="foreach: keys">
                        <span data-bind="text: name"></span>
                    </div>
                </div>
            </div>

            <div data-bind="dxToolbar: { dataSource: toolbarCategoryItems }"></div>
        </div>


        <div class="contentContainer" data-options="dxContent: { targetPlaceholder: 'content' }">

            <div data-bind="dxPopup: {
                visible: popupVisible,
                clickAction: closePopup,
                position: { at: 'top', my: 'top' },
                showTitle: false,
                shading: true,
                closeOnOutsideClick: true,
                height: 'function() { return $(window).height() * 0.5 }'
            }">
                <div class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dataKey dx-field-label">Ease</div>
                        <div class="dataValue inp dx-field-value">2</div>
                    </div>
                    <div class="dx-field">
                        <div class="dataKey dx-field-label">Verified</div>
                        <div class="dataValue inp dx-field-value"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dataKey dx-field-label">Owner</div>
                        <div class="dataValue inp dx-field-value">Dani</div>
                    </div>
                    <div class="dx-field">
                        <div class="dataKey dx-field-label">Cell Reference</div>
                        <div class="dataValue inp dx-field-value">N7</div>
                    </div>
                </div>
            </div>

            <div class="contentContainer" data-bind="dxList: { dataSource: finalDataSource }">
                <div data-options="dxTemplate : { name: 'item' }" class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dataKey dx-field-label" data-bind="text: $data.name, event: { dblclick: showPopup }"></div>
                        <div class="dataValue inp dx-field-value" data-bind="
        dxTextBox: { enable: false, value: $data.value, clickAction: inpClick }">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

js-file

    toolbarKeyItems = [
         { align: 'left', widget: 'button', options: { type: 'back', text: 'Back', clickAction: '#key' } },
        { align: 'center', text: 'Alliance' }
    ];
    toolbarCategoryItems = [
         { align: 'left', widget: 'button', options: { type: 'back', text: 'Back', clickAction: '#category' } },
        { align: 'center', text: 'Ownership' }
    ];

    popupVisible = ko.observable(false);

    data = [
        { id: 1, name: 'Year of Permanent Location', value: '', key_id: 1, category_id: 1 },
        { id: 2, name: 'Previously Known As', value: 'St. Marks', key_id: 1, category_id: 2 },
        { id: 3, name: 'Year Building was Built', value: '1925', key_id: 1, category_id: 3 },
        { id: 4, name: 'Own or Lease', value: 'own', key_id: 2, category_id: 2 }

    ]

    lengthDescription = " ";

    passMode = "password";
    secretDescription = "St. Marks";

    readonly = true;
    readonlyDescription = "1925";
    own = "Own";

    inpClick = function () {
        enable: true;
    }

    showScroll = function () {
        var value = $('#scrollView').css('display');
        if (value == 'none')
            $('#scrollView').css('display', 'block');
        else
            $('#scrollView').css('display', 'none');
    }

    MyApp.data = function () {
        var self = this;
        self.label,
        self.value,
        self.key_id,
        self.category_id;

        self.findDataWithId = function () {
            var dataWithId = Array();
            for (i = 0; i < data.length; i++) {
                if ((data[i].key_id == MyApp.app.keyId) && (data[i].category_id == MyApp.app.categoryId)) {
                    dataWithId[dataWithId.length] = data[i];
                }
            }
            return dataWithId;
        }

        self.finalDataSource = ko.observableArray(self.findDataWithId());

        self.viewRendered = function () {
            $('.contentContainer').height($("body").height() - $(".toolbarsContainer").height());
        }

        self.viewShown = function () {
            self.finalDataSource(null);
            self.finalDataSource(self.findDataWithId());
        }

        return self;

    }



    showPopup = function () {
        popupVisible(true);
    }

    closePopup = function () {
        popupVisible(false);
    }

    fromDataToKeys = function (event) {
        event.preventDefault();
        stopPropagation();
        MyApp.app.navigate('key');
    }

When i clicking 'back'-button from toolbar, the showScroll function works too.

Answer 1

onItemClickAction: function (e) {           
           if (e.itemData.options && e.itemData.options.type == 'back') {               
               e.jQueryEvent.stopPropagation();
           }
}

This is what DevExpress Team answered. And it works.

Answer 2

Not sure of your exact environment, but to prevent events from bubbling with DevExpress ASP.NET WebForms controls, use the following.

Add the following line to the Page_Load event (e.g., C#):

DevExpress.Web.ASPxClasses.ASPxWebControl.RegisterBaseScript(Page);

In the JavaScript event handler, add the following:

ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);

where e is the DevExpress standard event argument passed to event handlers.