Question

有问题我想在dxToolbar（PhoneJS）中添加“后退”按钮。点击此按钮我应该回到上一页。但是，通过单击工具栏的名称，将出现“some div block”。这是交易：当我点击“后退”按钮然后导航到上一页时，出现“some div block”。我该怎么做才能阻止事件的传播？我尝试使用jQuery，但它没有帮助

HTML文件

        <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-文件

    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');
    }

当我点击工具栏上的“后退”按钮时，showScroll功能也可以。

Answer 1

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

这就是DevExpress团队的回答。它有效。

Answer 2

不确定您的确切环境，但为了防止事件冒泡使用DevExpress ASP.NET WebForms控件，请使用以下内容。

将以下行添加到Page_Load事件（例如，C＃）：

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

在JavaScript事件处理程序中，添加以下内容：

ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);

其中e是传递给事件处理程序的DevExpress标准事件参数。

Phone.js工具栏单击操作

2 个答案: