Phone.js點擊工具欄上的行動

Question

還有就是我要添加按鈕「返回」到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'); 
    } 

當我點擊「工具欄從back'按鈕，showScroll功能也起作用。

Answer 1

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

這就是DevExpress團隊的回答。它的工作原理。

Answer 2

不知道您的具體環境，但要防止從ASP.NET DevExpress的控件的WebForms起泡，使用下面的事件。

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

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

在JavaScript的事件處理程序中，添加以下：

ASPxClientUtils.PreventEventAndBubble(e.htmlEvent); 

其中e是DevExpress的標準事件參數傳遞給事件處理程序。