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），它有同样的问题。
  • 我也知道 mouseover/mouseenter、mouseout/mouseleave 之间的区别。但是对于 mouseenter 和 mouseleave，它在 IE 上也有同样的问题，并且在 Chrome、Firefox、Opera、Safari 上运行良好。

我的问题是：如何在 IE 上解决这个问题？谢谢你。

4

0 回答 0