WinJS

Question

我有一个带有 "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

试试这个：

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 2

我做了一个简单的测试用例，发现 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/

Answer 3

我在this post

的帮助下得到了答案

更改我的模板，

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

更改我的模式 class,

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

WinJS - ListView 事件冒泡

WinJS - ListView event bubbling

html

knockout.js