Question

我有这段代码：

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 demo

当您将鼠标悬停在文本上时，您会看到一个选择下拉列表以及何时鼠标退出，你会看到文字。
此代码适用于Chrome， Firefox，Opera，Safari，但很难从中选择项目 IE下拉列表。
我正在使用IE 10和所有模式（IE10，IE9，IE8，IE7），它也有同样的问题。
我也知道mouseover / mouseenter，mouseout / mouseleave之间的区别。但是使用mouseenter和mouseleave，它在IE上也有同样的问题，在Chrome，Firefox，Opera，Safari上运行良好。

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

IE上的淘汰赛和鼠标事件问题

0 个答案: