WinJS - ListView事件冒泡

Question

我有一个listview，其中有一个“项目调用”监听器。List包含一个输入文本列，表示数量。当我点击文本框输入数量时，“项目调用”事件会触发。在列表视图中单击textbox时，如何停止事件。

我使用"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

我在这个职位的帮助下得到了答案

改变我的模板，

<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' },
                        }"

由于首先绑定了单击处理程序，所以它应该拦截单击事件，并通过stopImmediatePropagation防止绑定到同一元素的其他单击处理程序触发。

Answer 3

我做了一个简单的测试用例，结果发现clickBubble: false必须与click绑定相结合才能正常工作：

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

联署材料：

(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/