WinJS - пузырь событий событий ListView

Question

У меня есть listview с прослушиванием "iteminvoked". Список содержит один столбец текстового ввода для количества. Когда я нажимаю на текстовое поле для ввода количества событий «iteminvoked». Как остановить событие при нажатии на текстовое поле в списке.

У меня есть список связывания с «WinJS.UI.ListView» и «WinJS.Binding.Template».

ниже мой список,

<div id="productsview" class="productsview win-selectionstylefilled" 
         data-win-control="WinJS.UI.ListView" 
         data-win-options="{ 
         selectionMode: 'multi', 
         itemTemplate: select('#customProductListTemplate'), 
         layout: { type: WinJS.UI.ListLayout }, 
         loadingBehavior: 'incremental', 
         pagesToLoadThreshold: 2, 
         pagesToLoad: 2, 
         automaticallyLoadPages: true 
        }" 
         data-bind="winControl: { 
         incrementalDataSource: productSearchViewModel.customProductManager, 
         iteminvoked: productInvokedHandler, 
         loadingstatechanged: { AfterLoadComplete: '#productResultZero', OnLoading: indeterminateWaitVisibleForProducts }, 
         selectionchanged: { eventHandlerCallBack: productListSelectionChanged, appBarId: '#commandAppBar' }, 
         }"> 
        </div> 

ниже мой шаблон,

<div id="customProductListTemplate" data-win-control="WinJS.Binding.Template"> 
    <div class="listViewLine" data-win-bind="title: ProductName"> 
     <div class="ratio1"> 
      <a class="h4" href="#" data-win-bind="text: ItemId"></a> 
     </div> 
     <div> 
      <h4 class="ellipsis wrapText" data-win-bind="textContent: ProductName"></h4> 
     </div> 
     <div class="ratio1 textRight"> 
      <input type="number" data-win-bind="value: SelectedQuantity" data-bind="clickBubble: false" /> 
     </div> 
    </div> 
</div> 

Заранее спасибо ....

Answer 1

я получил ответ с помощью this post

изменений в шаблоне,

<input type="number" class="win-interactive" data-win-bind="value: SelectedQuantity; onclick: clickInTextFunction;" /> 

изменения в моем модальном классе,

public clickInTextFunction: any; 
constructor(odataObject?: any) { 
this.clickInTextFunction = WinJS.Utilities.markSupportedForProcessing((ev) => { 
      ev.stopImmediatePropagation(); 
     }); 
} 

Answer 2

Попробуйте это:

data-bind="click: function(data, ev) { ev.stopImmediatePropagation(); }, winControl: { 
         incrementalDataSource: productSearchViewModel.customProductManager, 
         iteminvoked: productInvokedHandler, 
         loadingstatechanged: { AfterLoadComplete: '#productResultZero', OnLoading: indeterminateWaitVisibleForProducts }, 
         selectionchanged: { eventHandlerCallBack: productListSelectionChanged, appBarId: '#commandAppBar' }, 
         }" 

Как обработчик кликов связан сначала, он должен перехватить событие click и через stopImmediatePropagation запретить другим стрелкам, связанным с одним и тем же элементом при запуске.

Answer 3

Я сделал простой тест, и оказывается, что clickBubble: false должны сочетаться с click обязательными для правильной работы:

<article> 
    <div> 
     <input type="text" data-bind="click: inputClick, clickBubble: false" /> 
    </div> 
</article> 

JS:

(function(){ 
    var $div = document.querySelector("div"); 
    $div.addEventListener("click", function(){ 
     alert("div clicked"); 
    }, false); 

    function ViewModel() { 
     this.inputClick = function(){}; 
    } 

    ko.applyBindings(new ViewModel(), document.querySelector("article")); 
}()); 

вышеописанный пример работает, как вы ожидаете - нажмите на входе отменяет барботирование и обработчик, прикрепленный к <div>, не запускается.

Вы можете попробовать его http://jsfiddle.net/jggo7zw7/