1

私はこのコードを持っています:

HTML:

<table>
        <tbody>
            <tr>
                <td data-bind="event: { mouseover: switchStatusEditingMode, mouseout: switchStatusEditingMode }">
                    <span data-bind="visible:statusEditingMode() === 0">New</span>
                    <select data-bind="visible:statusEditingMode() === 1">
                        <option value="0" selected="selected">New</option>
                        <option value="1">Shipped</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>

JS:

function ViewModel() {
     this.statusEditingMode = ko.observable(0);

     var self = this;
     self.switchStatusEditingMode = function () {
            var newMode = (self.statusEditingMode() + 1) % 2;
           self.statusEditingMode(newMode);
     }
}

window.onload = function(){
     var viewMode = new ViewModel();
     ko.applyBindings(viewMode);
};

JSFiddle デモ

  • テキストの上にマウスを置くと選択ドロップダウンが表示され、マウスを離すとテキストが表示されます。
  • このコードは、Chrome、Firefox、Opera、Safari では問題なく動作しますが、IE ではドロップダウンから項目を選択するのが困難です。
  • 私はIE 10を使用していますが、すべてのモード（IE10、IE9、IE8、IE7）で同じ問題があります。
  • また、マウスオーバー/マウスエンター、マウスアウト/マウスリーブの違いも知っています。しかし、mouseenter と mouseleave を使用すると、IE でも同じ問題が発生し、Chrome、Firefox、Opera、Safari で正常に動作します。

私の質問は: IE でこの問題を解決するにはどうすればよいですか? ありがとうございました。

4

0 に答える 0