0

大きなノックアウト ビューモデルを含む .net webforms ページがあり、特定の div をクリックすると、一部の div が非表示になるか、css が変更されるように切り替えています。また、さまざまなイベント ハンドラーと、ajax ルックアップを引き起こすいくつかの計算済みイベント ハンドラーもあります。

問題は、ページの任意の入力ボックスで Enter キーを押すと、div のクリック ハンドラーにバインドされたビューモデルの関数と、この div 内のボタンにバインドされた別の関数が起動することです。div のクリック バインディングを削除すると、ページ全体が投稿になり、デフォルトのボタンの動作に関連していると思われます。

この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;
}
4

1 に答える 1

2

問題が何であるかを正確に特定するのは難しいと思いますが、asp.net Webフォームについて少し知っているので、ここで推測します.

  • 通常、ページの本文全体を単一のフォームにラップするasp.net Webフォームを使用しています。
  • どの HTML フォームでも、テキスト入力にフォーカスがあり、Enter ボタンを押すと、最初に表示されたボタンのクリック ハンドラーが実行されます。
  • ボタンは、独自のクリック イベント ハンドラーを持つ div 内に含まれています。ボタンで発生するクリック イベントはバブルアップし、DOM の上部にあるすべての親要素でクリック イベント ハンドラーを実行します。

入力要素に keypress/keydown イベント ハンドラーをアタッチすることで、これを解決できる場合があります。そのハンドラー内で、Enter ボタンが押されたときにのみイベントが発生しないようにします。

于 2013-05-30T00:15:48.780 に答える