Html WinJS-ListView事件冒泡

我有一个带有“iteminvoked”侦听器的listview。列表包含一个数量输入文本列。当我点击文本框输入数量“iteminvoked”事件时。 单击listview中的文本框时如何停止事件

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

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

提前感谢….

试试这个：

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处理程序，它应该拦截click事件，并通过

stopImmediatePropagation

防止绑定到同一元素的其他click处理程序触发。

我做了一个简单的测试，结果是

clickBubble:false

必须与

click

绑定结合才能正常工作：

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

上面的示例如您所期望的那样工作-单击输入取消冒泡，并且不会触发附加到

的处理程序

---

你可以试一试

我在老师的帮助下得到了答案

更改我的模板

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

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

---

谢谢你的回复，但它不起作用。即使在添加code.Hmm之后，“iteminvoked”事件仍会调用。你有那个绑定的源代码吗？我已经尝试过了，但它不起作用。实际上，我使用的是模板。