Question

我有一个带有大型淘汰视图模型的.net webforms页面，如果点击了某些div，我正在切换某些div被隐藏或更改css。我还有许多不同的事件处理程序和一些导致ajax查找的计算器。

问题是，当我在页面上的任何输入框中按Enter键时，viewmodel中的一个函数将触发一个div上的click处理程序，另一个函数绑定到div中的一个按钮。如果我删除div上的click绑定，整个页面都会发布，这让我觉得它与默认按钮行为有关。

我尝试在此jsfiddle和下面的代码中重新创建大部分功能，但是，这不是重新创建问题。

HTML

<body>

    <div style="width:30%; float:left;">
        <div id="div1" class="divClass" data-bind="click: showDiv1, css: { active: div1Visible }">
            <h2>Div 1</h2>
        </div>
        <div id="div2" class="divClass" data-bind="click: showDiv2, css: { active: !div1Visible() }">
            <h2>Div 2</h2>
            <button id="randomButton">Random Button</button>
        </div>
    </div>
    <div style="width:70%; float:left;" data-bind="visible: div1Visible">
            <input  placeholder="name" 
                id="nameSearch" 
                type="text" 
                name="nameSearch"
                data-bind="value:nameSearch, valueUpdate: 'afterkeydown', event: {keyup: doSearch}"
                autocomplete="off"  
                />
         <input  placeholder="address" 
                id="addressSearch" 
                type="text" 
                name="addressSearch"
                data-bind="value:addressSearch, valueUpdate: 'afterkeydown', event: {keyup: doSearch}"
                autocomplete="off"  
               />
            <button id="resetButton">Reset</button>
        <div>
            <input id="grid" value="pretend I am a grid" />
        </div>
    </div>
        <div style="width:70%; float:left;" data-bind="visible: !div1Visible()">
            Should be hidden unless div 1 inactive
            <div data-bind="text: message"></div>
        </div>

</body>

JS

function MyViewModel() {
    // Data
    var self = this;
    self.div1Visible = ko.observable(true);
    self.nameSearch = ko.observable('');
    self.addressSearch = ko.observable('');
    self.message = ko.observable('');

    self.showDiv1 = function() {
    self.div1Visible(true);
    };    
    self.showDiv2 = function() {
             self.div1Visible(false);
    };

     self.doSearch = function (data, event) {
        var charCode = (event.which ? event.which : event.keyCode);
        if (charCode === 40) {
             $('#grid').focus();
        }
        return false;
    };

     self.quickSearch = ko.computed(function () {
         if(self.nameSearch() || self.addressSearch()) {
        //do some ajax grid binding if any values in search inputs
             $('#grid').val('found values');
         }

    }, self).extend({ throttle: 400 });

     self.searchHasValues = ko.computed(function () {
        return self.nameSearch() || self.addressSearch();
    });

    self.setMessage = function() {
         self.message('Shows when random button clicked');
    };

    self.resetSearch = function() {
        self.nameSearch('');
        self.addressSearch('');
        $('#grid').val('searchReset');
    };

}
window.viewModel = new MyViewModel();
ko.applyBindings(viewModel);

  $('#randomButton').click(function (e) {
                e.preventDefault();
                viewModel.setMessage();
            });
  $('#resetButton').click(function (e) {
                e.preventDefault();
                viewModel.resetSearch();
            });

CSS

.divClass {
    background-color: #ccc;   
    height:200px;
    padding:10px;
}
.active {
    background-color: yellow;
}

Answer 1

我发现很难确切地确定问题是什么，但我确实对asp.net webforms有所了解，所以我将在这里猜测。

您正在使用asp.net webforms，它通常包裹整个身体一个页面的单一形式。
在任何HTML表单中，当文本输入时焦点，然后按Enter按钮，第一个单击处理程序可见按钮被执行。
您的按钮包含在div中它有自己的点击事件处理程序。点击事件触发了按钮冒泡并执行所有点击事件处理程序其父元素直接位于DOM的顶部。

您可以通过在输入元素上附加keypress / keydown事件处理程序来解决此问题。在该处理程序内部，仅在按下输入按钮时阻止事件冒泡。

KnockoutJS - 一些点击绑定在按下时输入

1 个答案: