0

ボタン「戻る」をdxToolbar（PhoneJS）に追加したいという問題があります。このボタンをクリックすると、前のページに戻るはずです。ただし、ツールバーの名前をクリックすると、「いくつかのdivブロック」が表示されます。これが取り引きです：前のページに移動する前に「戻る」ボタンをクリックすると、「いくつかのdivブロック」が表示されます。イベントの伝播を停止するにはどうすればよいですか? 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 関数も機能します。

4

2 に答える 2

0

正確な環境はわかりませんが、イベントが DevExpress ASP.NET WebForms コントロールでバブルしないようにするには、次を使用します。

次の行をイベントに追加しますPage_Load(例: C#):

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

JavaScript イベント ハンドラーで、次を追加します。

ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);

はe、イベント ハンドラに渡される DevExpress 標準イベント引数です。

于 2013-10-16T16:04:36.477 に答える